全5回 ハマダナヲミのPhotoshopで作るUIデザイン入門

ハマダナヲミ

スマートフォンアプリをユーザーにもっと楽しく使ってもらうために欠かせない、UIのデザイン。人気書籍『神速Photoshop[Webデザイン編]』の著者であるデザイナーのハマダナヲミさんが、Photoshopを使ったUIデザインのポイントをワークフローに沿って架空事例つきで解説します。

Photoshopはもともと写真編集のためのソフトでしたが、印刷物やWebのデザインツールとしても使われるようになり、いまではデザインツールとしても多く使われています。このLessonでは、iPhoneアプリを題材として、PhotoshopでUIをデザインする方法を紹介します。 アプリのUIデザインのワークフローを知ろう Webサイトの制作では、PhotoshopでのデザインからHTMLやCSSに
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。
Loading...
第2回はいよいよ、架空のiPhoneアプリを例に、実際にUIをデザインしていきます。お題は、現在の空模様の写真を撮影し、位置情報とコメントとともにシェアする「お天気投稿アプリ」です。 お天気投稿アプリは、以下のワイヤーフレームのような画面で構成されています。 このうち、今回は3つ目の「投稿画面」について、ディレクターが用意したワイヤーフレームをもとにPhotoshopでデザインを作成します。 1.
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。

有料会員登録で、
すべてのLESSON記事を閲覧できます

Loading...
第3回では、写真やアイコンを配置したり、質感を作り込んだりして、アプリのデザインを完成させます。 4.レイヤー効果を使って質感のあるボタンを作る お天気アイコンのボタンを作ります。このアプリのキーとなる「お天気選択機能」を実行するためのボタンですので、ユーザーにアプリを印象づけるデザインにしっかり作り込んでいきます。 まずはボタンのベースとなるシェイプを作成します。描画色を[172 205 238
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。

有料会員登録で、
すべてのLESSON記事を閲覧できます

Loading...
Lessonの最後は、ここまでに仕上げたデザインを確認してエンジニアに渡すまでの手順を追って紹介します。 8.実機で見た目を確認しよう Photoshopでアプリのデザインを仕上げたら、iPhone実機に表示しましょう。第1回で紹介したアップルの「iOS Human Interface Guidelines」(HIG)にも規定されているように、ユーザーがきちんと操作できるかどうか、UIパーツのサイ
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。

有料会員登録で、
すべてのLESSON記事を閲覧できます

Loading...