ピュアチャ〜ジ

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

Webデザイン25日目の成長報告!

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


[ピュアチャ〜ジ]

一旦更新!

いや〜、一旦です!w

 

最近Webデザインもいいけどプログラミングもいいなってことでそっちも手出しちゃいまして。

まぁ色々手を出してどっちも学習できてないやん!

ってことになっちゃうかもしれないんですけど、どっちも面白いのでやってるって感じですね

 

Rubyをやっています。

 

とまぁそれはいいんですが、今日勉強したWebデザインのことを振り返ろうかと思いました〜!

 

 

1.パンくずリストを作成

 これね、パッとみた時まじ細かくて本当にやる気削がれたんですが、やるしかないんでやりました。

案外、そんなに時間かからずできました。笑

 今回は、元々あるサイトを「似せる」っていう学習方法だったので、Photoshop上に参考のパンくずリストを置いた状態で作業をしました!

 

なので、結構すいすいやれましたね

 

パンくずリストの作り方】

1.ガイドを使って同じサイズのシェイプを作成

2.Homeを意味する「家」のpngを配置

3.矢印を「ペンツール」で描いて、移動ツールで移動

 

こんな感じですね!

 

【つい押してしまうボタンの作成】

ちょっとなれてきたような気がしてきました!

みて、どういう加工がなっているのか、わかるようになってきたんです!嬉しい!

 

1.長方形ツールで四角を描く

2.グラデーションツールで色を設定

3.境界線を見て、設定(1pxだったので、参考ボタンの色をスポイトツールで抜きました)

4.枠にドロップシャドウを内側の光彩を入れる(これでだいぶん立体感出ましたね)

5.文字にもドロップシャドウと境界線(外側)入れる

6.ボタンを作成

 シェイプツールで円を作る>外側はドロップシャドウ(白色)入れる>内側はシャドウ(内側)入れる 

7.下矢印も6と同様にする

 

以上!

こんな感じ!

 

 

いや〜楽しい!成長できたよ今日も〜いえい♪

全然関係ないけど、マレーシアのエアコンが寒すぎて、それに慣れるのが直近の目標。笑

 

ということで、こんな感じ!

まだ時間はたっぷりあるので、もうちょいやりそうだけど一旦こんな感じ!

 

今日は、ここまで!