![見出し画像](https://assets.st-note.com/production/uploads/images/82636448/rectangle_large_type_2_5f63a8d8fd84745926dbf2ca3d1250e0.png?width=1200)
デザイン入門 5日目①
今回は内容多すぎて完成に時間がかかるうう・・・追いつかない・・・
ごちゃごちゃになるから2、3個に記事分ける事にします。
とりあえず今回はグラデーションについて書いていく〜!
まずは考察しよう!(PLEN-B新卒サイト)
・全体的に赤が使用されている。会社のロゴカラー(赤)使用することで、会社のイメージを強調している。
・フレッシュな若者の写真が多い。新卒採用なので、新卒が入社のイメージがしやすいように歳の近い社員の写真を使用しているのでは。
memo
・写真に寒色系のフィルターを使用し、パキッと・真面目な印象。
・手書きの文字を使用することで、行動力のある・元気なイメージ
・リクルートページなので、会社の雰囲気を伝えるために人の写真が多い。人を大切にしている会社なのでは?
・ファーストビューは人の顔が印象的。採用ページなので、この会社で働く「人」「社員」を強く印象付けている
・躍動感のあり力強い手書き文字→行動力のある元気な新入社員を連想させる。
グラデーションを作ってみよ〜!
上記サイトにグラデーションが使われているのでとりあえず作ってみる
・グラデーションパネル(ウィンドウ)
図形を作成し、グラデーション(ウィンドウ)を開く
塗りをクリックして色を選択
![](https://assets.st-note.com/img/1657704776955-w01wn6Wk7G.png?width=1200)
グラデーションをクリックして完成〜!!
![](https://assets.st-note.com/img/1657705068121-aqzum46BCw.png?width=1200)
種類
グラデーションの種類は主に3つ!
左から・・・
1.線型グラデーション
2.円型グラデーション
3.フリーグラデーション
![](https://assets.st-note.com/img/1657705514519-8Dg0fG8lIW.png?width=1200)
フリーグラデーションは○(カラー分岐点)を使って、いろんな色で自由にグラデーションができるっぽい。
時間がある時に試してみる!今後の課題!
色を変える
![](https://assets.st-note.com/img/1657706495497-8pb2DiG55d.png?width=1200)
グラデーションスライダーの下にある○をクリックして色を変えられる!
○を追加することもできる。
(追加したものを消したい時は、右のゴミ箱ボタンを押すか、下にスライドすると消えるよ!)
これを作ってみよう〜!
![](https://assets.st-note.com/img/1657780414553-69bVPrjJJQ.png?width=1200)
長方形ツールで長方形を作成
グラデーションパネル(ウィンドウ)から、線型グラデーションを選択
グラデーション角度を調整
今回は上→下のグラデーションを作りたいので、角度を調整(−90°)不透明度を調整
薄い色の方の○(カラー分岐点)を選択して不透明度を80%にしてみる
![](https://assets.st-note.com/img/1657781155206-tZLtam4Hoh.png?width=1200)
見本よりも透明感が強い・・・
帽子の「無理」がうっすら見えるくらいにしたい!!
不透明度100%の○(カラー分岐点)を追加してみる!
(グラデーションスライダー上にある◇で割合を微調整できるよ)
完成〜!!!
![](https://assets.st-note.com/img/1657781233408-rGlCQP6Cli.png?width=1200)
まだまだ書くことがあるけど、
一旦これで終わり。