くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Photoshop]バナーの練習

Photoshopでローソンのバナーを真似て作成してみました。

見本

f:id:pleasure10501:20150422212448g:plain

このように写真や文字が重なっている場合は、作る前に順番を考えておくことが大事です。

 

上からの順番

① 文字・ロゴ

② 枠

③ 下半分の緑の領域

④ 野菜の画像

Photoshopでレイヤーを増やすと上に追加されるので、下にある層から上に向かって、レイヤーを追加しながら作るのが効率的です。

出来上がりはこちらです

f:id:pleasure10501:20150422212307p:plain

 

②の枠の手早いつくり方について。

1、枠をつける範囲を選択します

2、枠の色を描画色に設定するか、もしくはスポイトツールでピックアップします

3、編集 > 境界線を描く をクリック

4、境界線の幅を入力

f:id:pleasure10501:20150422214047p:plain

 

「新鮮を毎週お届け」の上下の点線の書き方

1、ブラシツールを選択  モードの左のボタンを押す

f:id:pleasure10501:20150422215505p:plain

2、直径1px、硬さ100%、間隔を250〜280%にする

硬さ:0%は輪郭がぼやけている円が描ける。100%になるほど輪郭がくっきりする

間隔:円の間隔 数値が大きい程間隔も広い

f:id:pleasure10501:20150422215642p:plain

3、プレスしてドラッグする
  Shiftキーを押しながらドラッグすると直線が描ける。

 

定規で線を引くように正確に描きたい場合は、ルーラーで目印をつけるのが効率的です

f:id:pleasure10501:20150422220101p:plain

 

 

広告を非表示にする