デザインをする上で必要な余白、文字加工

こんにちわ!ふじしろです!

そういえば!今日はiphone7の発売日!!

やっと替えれるので楽しみです!

さて、今日は週末最終日ですからデザインもほぼ完成!しとかないといけない日です!

ふじしろは。。。。。
この3連休存分にphotoshopと戦うことになりそうですw

しかし!デザイン本当にたのしい!
もっとはやく効率を上げたいですね!

今日学んだことは、

 

余白の重要性
写真の上に文字を置くときの工夫

になります!

 

余白の重要性

green15_jyougi20141123165428_tp_v

まず余白の重要性ですが、
ぼくはデザインしてるときコンテンツごとにばらばらだったり、
フォントサイズの統一ができていなかったりしていました。
しかし、今回ご指摘いただき、そこを修正するためにgoogle先生にもご教授いただきながら、
それなりに形になってきました。

伝わるデザイン|研究発表のユニバーサルデザイン

http://tsutawarudesign.web.fc2.com/index.html

つみきブログ

http://blog.tsumikiinc.com/article/20150402_%20appropriate-margin-of-heading.html

この2サイトが非常に参考になりました!
現在は2つ目の記事を参考にデザインを進めております!

どういうことかというと、
たとえば、32pxの見出しがあるとします。
そのあとに中身を入れていくと思うんですけど、
この距離感ですね。

この距離感を大体1文字分くらいあけるといいとのことだったので、
32pxあけています。

これをするだけで、

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a34

すっごい、いい(ハート)w

きれいです!
統一感あります!

どや!って作りながらなってます!

このように幅や余白のとり方などをルール化することで、見え方がぐっと替えることができます。

本来はもっといい方法があると思うんですけど、

ぼくはコンテンツごとに上記のように色を変えながら余白用の図形を作って、間隔を作っています!

 

写真に文字を置くときの工夫

marufuku0i9a8695_tp_v

つぎに学んだことは、

画面に広がる写真の上に文字があったり、ロゴがあるサイトって結構目にしませんか?
すごい見やすいし伝わりますよね?

ふじしろもやってみました!

結論から言うと、
ぜんぜん文字見えないね。
わからないね!

bulog%e7%94%a8

こんな感じに白色の文字でおしゃれに♪

なんて思ってたんですけど、

そうゆうことです。
めっちゃ苦戦してますw

で、今日教えてもらったことと、自分でやったことがありまして、

ひとつは、
写真の部分的に、すりガラスみたいなものを敷いて、文字をうつ。
分かりにくいですよね。w

https://design.tutsplus.com/tutorials/quick-tip-add-a-frosted-background-to-photo-captions–psd-9014

これとか参考になるかもです!

これは、白い長方形を文字を書くところに作成し、

レイヤースタイルで、不透明度を20%、境界線も白にし、不透明50%に設定

ここちょっと意味がわからなかった】背景画像レイヤーを選択した状態で、

白い長方形を作ったレイヤーを【ctrl+クリック】して選択範囲を決めて、

フィルター→ぼかし→ぼかし(ガウス)20%

文字レイヤーを乗せる。

すると、

79917ce0854be4d7e2143e1b2f23ca1f_s

ちょっとありそうなかんじですよね!!

いい感じに出来てきました!

配色をミスった感じはしますが、w

また別の方法としましては、

文字に対して工夫を加えてあげる。

79917ce0854be4d7e2143e1b2f23ca1f_s

これは境界線を作ってあげているパターンですね!

ただ少し古臭いといいますか、アプリでできそうですねw

次は、

79917ce0854be4d7e2143e1b2f23ca1f_s

ドロップシャドウをくわえてあげてます。

不透明度30%ですこしくっきり目にやっています。

これがとてもいい感じです。

こういった工夫でまだまだおしゃれにしていきますよ!
ではまた来週!!

コメントを残す