Photoshopを使ってみよう

Photoshopを使ってみよう

Photoshopにはどんな機能があるのかをホームページのレイアウト作成をまじえながら説明していきます。ホームページのレイアウトは当サイトで言えば上部にヘッダーが有り左にサイドバー真ん中にメインコンテンツ右にサイドバー、そして下にヘッダーが有ります。各グループにはマージンを設けてます。あまり隣接しすぎると見にくくなるため通常マージンを設けてます。

レイアウト完成イメージ

ようは上記の様に実際の出来上がりと同じホームページレイアウトを作り配置を整えレイアウトを作成します。最終的には出来上がったレイアウトを元にhtmlコーディングをしていき各パーツをスタイルシートに入れ込んだりしてホームページが完成していきます。レイアウトを作成していく時点で余白やマージンは決めていきますのでスタイルシートでのマージンや余白の数値は迷わず設定できます。それでは実際Photoshopを使ってみましょう。

レイアウト画像新規作成

Photoshopを立ち上げ左上のファイル-新規をクリックして作成する画面の大きさを決めます。今回は横幅1070pxの大きさホームページを作りますのでそれより大きいサイズ、横1500px、縦3000pxに設定します。サイズを入力したらOKをクリックします。

レイアウトのサイズ指定画像

画像拡大縮小表示

画面には縦長の真っ白い画像が表示されています。ちなみにこの時点ではこのレイアウトがすべて表示されるように縮小されて表示されています。拡大するには左側にある虫眼鏡のマークをクリックして縦長の真っ白い画面の上でクリックすると拡大していきます。拡大された%は左下に表示されています。ここが100%になった時点が実際にホームページで表示される大きさになります。又画面上で右クリックするとズームイン・ズームアウトなどの詳細が選べますのでここで縮小したり画像をもとにもどしたり出来ます。

拡大縮小設定画面

それでは次にレイアウトを作成していく前の各設定をしていきます。

レイアウト作成前の準備、定規設定

レイアウトを作成するまえに作成しやすいように設定をしていきます。上部にあるメニューの編集-環境設定-単位・定規をクリックしてください。すると環境設定画面の単位・定規が設定できる画面になりますのでそこで、単位の定規と文字をpixelに変えてOKをクリックします。

単位設定画面

次に上部にあるメニューの表示-スナップをクリックしてチェックをして、スナップ先-ガイド、レイヤー、ドキュメントの端全てにチェックしておきます。

スナップ先設定画面

次に上部にあるメニューの表示-定規をクリックすると画面上に定規が表示されます。

定規の設定画面

この定規を利用してレイアウトを正確に作成していきます。それでは次に各パーツのサイズ・配置を決めていきますが画面上に仮の線を引ける(ガイド)と言う便利な機能が有るのでそれを使い仮の線を引きサイズ・配置を設定していきます。

最終更新日: 2013年1月24日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

Photoshopを使ってみようの関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*