menu
閉じる
  1. 画面サイズごとにCSSを切り替える!メディアクエリとは?
  2. スタートアップに使える!HTML5とCSSのテンプレート
  3. Photoshopで文字と文字の行間を変える方法
  4. IF文マスター!各プログラミング言語での、IF文の書き方。
閉じる
閉じる
  1. PHPで三項演算子「?:」を使うとき
  2. jQueryで、検索する前のオブジェクトに戻る方法
  3. FireFoxでリンクをクリックすると表示される謎の線
  4. IF文マスター!各プログラミング言語での、IF文の書き方。
  5. jQueryで特定のリンクにTargetBlankを付与する方法
  6. ウィンドウサイズによって画像のサイズを変えたい!
  7. スタートアップに使える!HTML5とCSSのテンプレート
  8. jQueryでradio / checkbox / select / …
  9. 「Google Fonts + 日本語 早期アクセス」を使ってみた
  10. 【Access】SQLで値がNULLの時、別の値に置換えるNZ関数
閉じる

なるほど!ちきんぷろぐらまーず

PhotoshopでiPhoneアプリのUIデザインを作る方法!

ぴよきち「 Photoshopはデザイナーが使うツールだ!!! 」

ぴよきち「 我々プログラマーは一生使う事など無いっ!!!! 」

 

そんなふうに考えていた時期が、ぴよきちにもありました。

こんにちは、ぴよきちです。

いきなり本題を見る!

僕はプログラマーなのですが、最近よくWEBデザインやスマホアプリのデザインまで一緒に頼まれる事があるんです。

pasocon

正直デザインなんて出来ませんよ。ハイハイ、ムリムリ!

ぴよきちはセンスの欠片もないチキン野郎からね!

 

絵のセンスなんてアメトークの絵心ない芸人レベルだよ!?

こんなやつにデザイン頼むなんて…頭おかしいんじゃ

 

正直なにをしたら良いのかも分からないレベルだったのですが、挑戦してみることにしました。

 

とりあえず、Photoshopを使ったことがないので動画やWEBなどを見て、基本操作を覚えた気になった。

さらには、他人が作った素晴らしいUIデザインを色々と見て、自分も素晴らしいデザインが出来る気になった。

そんな感じで必死に勉強をした末、最終的には他人の良いデザインをパクって(参考にして)なんとかミッションを遂行した!

 

そこで今回は、ぴよきちが独学で学んだ「iPhoneアプリのUIデザイン」を公開します!

デザイン!とか偉そうに言ってるが、ただ単にUI部品を組み立ててる手順を順に公開しているだけなんですけどね。

 

なので、意識高いスタバ作業員はお帰りください。どーせ役に立ちません。

この記事は、UIデザインに困っているエンジニアの方向けの記事なんです。

 

PhotoshopでiPhoneアプリのUIデザインを作る方法!


面倒なので今回は、iPhone6やiPhone7の画面サイズ(4.7inch)を基準にしてデザインを行います。

 

■端末ごとの解像度(画面サイズ)について

サイズについては下記を参考にしていただければ良いと思います。

サイズ 端末 ピクセル
4インチ iPhone 5
iPhone 5s
iPhone 5c
iPhone SE
640px ✕ 1136px
4.7インチ iPhone 6
iPhone 6s
iPhone 7
750px ✕ 1334px
5.5インチ iPhone 6 Plus
iPhone 6s Plus
iPhone 7 Plus
1080px ✕ 1920px

 

■UIデザイン作り方

基本的には、ボタンなどの素材をペタペタと貼っていくだけです。

ただし、ステータスバーなどを意識して作成しないといけないので最初は面倒だったりします。

まぁやってみましょう。

 

1.どんなUIデザインにしたいか絵を描いてみる


 てきとーでいいんです

ef

2.素材を作ったり集める


僕は素材を作ることはできませんので、フリー素材を拝借しました。

ICOOON MONOというアイコン素材サイトがおすすめです。 

 

3.準備完了!作っていこう。


準備完了したのでPhotoshopに戻りますが、

今回はiPhone7用のデザインを作りますので、とりあえず「 750px ✕ 1334px 」のサイズで新規作成します。

001

 

次にステータスバーのエリアと、ナビゲーションバーを設置します。

ステータスバー:時計とか電池マークとかが出てるエリア(40pxで作成

ナビゲーションバー:タイトルとかメニューなどを表示するエリア(88pxで作成

2

 

ナビゲーションバーに、ボタンやタイトルやらを設定します。

DLしてきた素材をペタペタおいていくだけで完成です。

3

あとはスワイプして切り替えるタブと、コンテンツ内容をペタペタしたら完成です!

スワイプタブ部分のサイズは・・・なんとなくテキトーに作ってます!

 

iOSには標準のUIライブラリに横スワイプできるタブがありません。(たぶん)

なので、どうせライブラリーを入れる事になると思うので、その仕様に合わせればOKです。

4

画像については、大小の2種類用意してみました。

大の方のサイズが(750px ✕ 472px)で、小の方のサイズが(350px ✕ 249px)になります。

 

これで完成です。せっかくなのでiPhoneで見てみよう!

いい感じになりましたね!iphone

 

次回は、このデザインから素材をスライスし、アプリで使えるように加工していくお話をしたいと思います。

ということで、おしまいです。

関連記事

  1. Windowsフォトビューアーの色がおかしい?

  2. 画面サイズごとにCSSを切り替える!メディアクエリとは?

  3. FireFoxでリンクをクリックすると表示される謎の線

  4. スタートアップに使える!HTML5とCSSのテンプレート

  5. PHPでエラー『unexpected …』が出たとき…

  6. jQueryで特定のリンクにTargetBlankを付与する方法…

おすすめ記事

  1. IF文マスター!各プログラミング言語での、IF文の書き方。
  2. スタートアップに使える!HTML5とCSSのテンプレート
  3. Photoshopで文字と文字の行間を変える方法
  4. 画面サイズごとにCSSを切り替える!メディアクエリとは?

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ページ上部へ戻る