ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強32日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はい。最近どんどん作業スピードが早くなってきたぞ〜♪

 

有益すぎる。有益なことしかしていない。笑

 

ということで、今日の作業進捗です!

 

 

 

1.トップページメニューの下のアイコン作成

 長方形+▼を入力し、サイズ、色を合わせて作成 

2.メイン画像の作成

 ①クリッピングマスクで場所に画像挿入>明るさ、コントラストを調整(どちらも30くらい)>自然な彩度を調整(70くらい)

 ※二つの色調補正は画像全体にかかってしまうため、色調補正も図形に対してクリッピングマスクをする必要がありました!

 ②画像の外側にドロップシャドウをかけました!距離2、サイズ7

 ③画像の内側に白色の枠線を配置

 

2.新着情報を作成

 ①新着情報の内容(日付と文章)の作成

 ②各文章と文章の間に点線を挿入

 鉛筆ツール>ブラシ>間隔を調整

 これで鉛筆で書いた点線みたいな書き方ができました!

 shiftを押しながら横にドラッグすることで点線を描けます!

 ③新着情報のボックスにもドロップシャドウをかけるため、先ほどメイン画像で使ったドロップシャドウのレイヤーを選択&ドラッグし、altで新着情報レイヤーの上で離すことで移動しました!

 

3.サイドバーの作成

 1と2でかぶるところ:画像を挿入、文字を入力、ドロップシャドウ

 画像にグラデーションをかける所がメイン画像の加工と違ってましたが、これの方法を忘れていたので思い出すことができました!

 画像挿入>クリッピングマスクかける>レイヤーマスク>グラデーションツールに切り替え>チャンネルパネルの下部の「目」アイコンを表示>グラデーションをかけたい方向にドラッグ

 二つ目のサイドバーは、一つ目と画像が違うだけなので簡単に作成できました。

 Alt+ドラッグで下に移動>元々の画像を2番目に使う画像に入れ替>レイヤーマスクを二つ目の画像の横にドラッグで移動

 

こんな感じです!

 

4.コピーライトの入力

 

 

以上です!

 

過去やったことで忘れている部分もあったんですが、よく使う昨日はこうやって何回も反復することで学習し直して定着させていこうと思います。

 

今日は3時間やったのかな?

休み明けは作業しすぎちゃう癖があるんですが、無理せず続けていこうと思います。

 

 

ということで、今日はここまで。

シェアメイトがトレーナーに受かったってことで、祝杯のビールを買って行ってあげようと思います。笑

おやすみなさい!