初心者🔰のWebデザイン独学記録🐣✏️

その日の気づき・疑問点・進捗📝

#Day66 背景にグラデーション🌈

#Day66

 

可読性を高める手法として背景にグラデーションを入れてみる。

 

マスクした画像を選択して、”塗り”のところからグラデーションをつけることが可能🔍

線型・放射型・ひし形などグラデーションを入れる箇所も選択可能。

 

なるべく写真を潰さずに文字を読みやすくする目的なので今回は線型で試す。

 

 

グラデーション作業

メインの色合いを選択して、上下や真ん中の色の濃さなども設定できる。

一度適当に入れたらキリンのぬいぐるみが真っ白になったので調整。

温かいイメージの暖色オレンジがいいかなと思い作業していたが、他の色にしてみても何だか差があまりわからなかった・・

差がわからない・・

やり方が違うのかな・・

 

でもグラデーションを入れたことによって文字は見やすくなったと思う。

 

調べていたら座布団も透過度によっては写真を潰しすぎずにできそうかもと思ったのでやってみる。

座布団

あんまり良くないと感じた。

マーカーみたいで・・ダサくなった。

もう少し白や透明に近い色でやっていたサイトを見かけたが、それはおしゃれだった。

これは背景がそもそも白っぽいので同じような色でやると文字が見やすくはならなかった。(背景に同化してほぼ変わらない)

シャドウやグラデーションを入れるのであれば必要ないと思った。

 

自分としては 

1シャドウ→見やすい。でも色はもう少し試行錯誤してもいいかも。

2透過→見やすい。温かいイメージが出る。

3グラデーション→透過より写真の色味を変えずに見やすい。温かいイメージも出る。

 

という結果かなと思ったので

1と3を採用し、現在の進捗。

 

進捗

https://www.figma.com/file/gfoImPAq636rIrkYg8v6EU/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB?type=design&node-id=1%3A2&mode=design&t=10TbL078IRZZp4vK-1