タグ

UIとFenrirに関するBowz13のブックマーク (5)

  • アプリケーションアイコンを作るときに参考になるサイトまとめ

    こんにちは!デザイン担当の福島です。 今日は、わたしがアイコンを作成する際に見る参考サイトの紹介をしたいと思います。 あの機能のシンボルってなんだっけ?ってときに見る。 あれ、この形って一般的なのかな?と、作っているときに不安になることはよくありますよね!心配になったときに検索すると一般的に連想される形がわかって捗ります(一般的なシンボルもプラットフォームによって多少違ってくるので、数が多い = 正解とはいいきれませんが) たとえば『タブ』ってどんな形で表すのが一般的なんだろう?というような疑問にすぐに答えてくれます。 FIND ICONS 色んな検索に対応しているので、がっつり調べたいときはここで検索します。 ICON FINDER さくっと見たいときはこちら!16/24/32/48/64/ 等の一般的なサイズで絞りこめるので 16px で作られた、あの複雑な形のアイコンがみてみたい!な

    アプリケーションアイコンを作るときに参考になるサイトまとめ
  • 高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ

    こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド> Smart Resize > Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的

    高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
  • iPhone と Android で同じアプリを作るときの UI 設計ポイント

    こんにちは。共同開発部企画担当の荻野と申します。 フェンリルでは自社のソフトウェアを開発する部署とは別に、他の企業や団体と共同でアプリケーションの開発をおこなう共同開発部という部署が存在します。 私はその中で企画提案の担当をしていますが、最近、「今ある iPhone アプリケーションを Android でも出したい」「iPhoneAndroid 同時開発してほしい」とのご相談をクライアント様よりいただく事が増えてきました。 「同じスマートフォン同士、親戚みたいなものなんだから簡単に平行展開できるでしょ?」と、軽いノリでご相談をもってきてくれるパートナー企業様。 いやいや、ちょっと待ってください。 iPhoneAndroid では、端末のも UI も全然違うので、そんな簡単にできるものではないのです。 そもそも OS が異なるので、 iOS では簡単にできるけど Android

    iPhone と Android で同じアプリを作るときの UI 設計ポイント
  • 【iPhone / iPad 開発】新しい iPad の Retina ディスプレイ対応にする方法と落とし穴(+期間限定セールのお知らせ)

    こんにちは。開発担当の金内です。 みなさん、新しい iPad をもう触ってみましたか?話題は何といっても Retina ディスプレイ。4倍のピクセル数になって、まるで印刷物のような美しさです。 Sleipnir Mobile for iPhone / iPadiPad の Retina ディスプレイ対応版を App Store に申請しています。どうやらいつもより審査に時間がかかっているようなのですが、もう少々お待ちください。 今回は iPhone / iPad 両対応のユニバーサルアプリを Retina ディスプレイに対応させるにあたってのポイントと、下手をするとハマってしまう落とし穴を紹介します。さらに、iPhone / iPad アプリの期間限定セールのお知らせもあるので最後までお読みください。 ファイル命名規則UIImage への読み込み “image.png” というイ

    【iPhone / iPad 開発】新しい iPad の Retina ディスプレイ対応にする方法と落とし穴(+期間限定セールのお知らせ)
  • リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

    こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量:10で追加します。これが同心円状のヘアラ

    リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
  • 1