こんにちは、コンスキです。
今回は、前回に続きであるContact部分のデザインをしています。
編が進むたびに進むデザインの速さはとてもゆっくりですが、着実に完成へと近づいていると思います。
デザインを前もってしておくのいいところは、完成に近づいても気軽にデザインの変更をすることができる部分だと思います。
そのためところどころ修正を加えていくかも知れません。
Contact部分のデザイン
1. Contactの見出し部分を作ります。
2. Contactの内容部分を作ります。
今回使った機能
機能と言うほどではないのですが、スクリーンショットの一部をGIMPを使って変更する手順を説明します。
- 「ファイル ▶︎ レイヤーとして開く」のように選択します。
2. 取り込みたいスクリーンショットのファイルを選択して開きます。
3. 出てくるダイヤログで「変換」選択します。
「維持」も選択してみましたが、どちらも同じようにスクリーンショットを取り込むことができました。
本当はこの2つに違いがあると思います。今回は念の為「変換」の方を選んで見ました。
4. 左側のツール一覧から、描画色の変更を選んで、修正したい部分の背景の色を設定します。
スポイトを使うと、簡単に背景の色を設定することができます。
5. ツールバーの中から「矩形（くけい）選択」を選びます。
6. ドラッグして修正したい部分を選択します。
7. 「編集 ▶︎ 描画色で塗りつぶす」を選択します。
上の画像のように文字を消すことができます。
同じようにやれば文字以外でも消すことができます。
8. ツール一覧の文字消した部分に書き換えたい内容を加えます。
終わりに
前回までに終えたデザインを変更した部分があります。
キャンバス全体を見ていただくとわかるかも知れませんが、文字の色や見出しの背景の色を黒に変更しました。
前回までで、全体的に使われている色の数か増えすぎてしまったためです。
空白を埋めていた画像がカラフルだったと言うこともあって、変更する色は落ち着いた黒にしました。
Blogの部分もシンプルすぎたため、イラストと画像を組み合わせたデザインに変更しました。
この部分にはJavaScriptなどを使って動きをつけようと考えています。
今回まででできた全体像は次のようになります。
コメント