こんにちは、ながのです。
ふたっぱさんでのインターンシップ2日目です。
今日はwordpressで作成したこちらのブログのカスタマイズを行いました。
その際にフリー素材を使用してヘッダー画像を作成したので、その工程をご紹介します。
デザインテーマの変更
まずはデフォルトのデザインから、ヘッダーに画像を設定できるデザインへと変更しました。
wordpressのデザインテーマを変更する方法はこちらの記事をご参照ください。
ヘッダー画像のコンセプトを考える
使用する画像を準備する前に、どんなデザインにするかのコンセプトを考えました。私が考えたコンセプトはこちらです。
・学ぶ、制作する、をイメージするもの
・カラフルさで前向きや意欲をイメージさせる
インターンシップ生らしく、勉強や制作を連想させるものがいいなと考えたので、写真素材サイトで「文房具」と検索しました。次に考えたのは、使用するデザインテーマがモノトーンなのでカラフルな色合いがいいなということ。カラフルな写真から前向きさや意欲を連想してもらえたらと考えました。
このコンセプトから、ヘッダーに使用する画像は色鉛筆の写真を使用することに決めました。
今回利用した写真素材サイトはこちら
→無料写真素材 写真AC
画像を必要なサイズに都合よく加工する
自分の希望するサイズや構図の素材に出会うことはめったにないんじゃないでしょうか?使用する前に加工をすることがほとんどですよね。今回の画像も、必要なサイズにまったく足りていませんでした。そこで使える画像にするまでの工程がこちらです。
1.必要なサイズを確認する
2.繰り返しができそうな画像を選ぶ
3.複製して繰り返す
4.つなぎ目はスタンプツールで
1.必要なサイズを確認する
ダウンロードしたwordpressのテーマはカスタマイズメニューで変更が出来ます。ヘッダー画像を変更する画面へ進むと推奨サイズを教えてくれます。
今回は最低でも1000×250pxが必要だと表示されました。
2.繰り返しができそうな画像を選ぶ
候補写真の中から横に増やせそうなものを選びました。
私が選んだのがこちら。
まっすぐ平行にならんでいるので、横の加工が簡単そうですよね。
3.複製して繰り返す
こちらをPhotoshopで加工します。必要なサイズよりやや大きめのキャンバスを用意して画像を配置しました。そのままレイヤーを複製し、横に足すのもいいのですが、色鉛筆がグラデーションになるように並べられているので、画像を反転させてよりグラデーション感を出すようにしました。
こちらはただ複製したレイヤーを横に並べたものです。
4.つなぎ目はスタンプツールで
反転させて並べ直したものがこちら。色合いが繋がるようにしました。
点線の部分がつなぎ目です。不自然さを消すために隙間をスタンプツールで修正しています。
スタンプツールの使い方はこちらからどうぞ。
→Photoshopでコピースタンプツールを使う方法【初心者向け】
ざっくりした解説になりましたが、この手順で作成したものがヘッダーで使用している画像です。
ブログバナーも同じ雰囲気で作成する
ふたっぱさんの公式サイトからこちらのブログへリンクを貼る際に使用するバナーも同じ雰囲気で作成しました。
ですが、もっとカラフルでも面白いかも?と考えて作り直したのがこちら。
色鉛筆を画面いっぱいに使用してカラフルさを前面に出しました。
以上がヘッダー画像のカスタマイズでした。
Wordpressのテーマそのものを自作してみたいのですが、まだそれができるスキルがないので今回は既存のものをカスタマイズしました。このインターンシップ期間中にできればいいなと考えています。もし出来上がればこちらのブログで過程をご報告しますね。
では今日もありがとうございました!