こんにちは！ 勉強になったネイネイ(@NEYNEYx2)です。
サイト開設後から使用していた、ブログのヘッダー画像を変更しました。
以前ココナラでキャラクター作成をして頂いた「りん＊ 
」さんにお願いして描いていただきました。
ココナラでヘッダー画像の作成依頼
本来「りん＊」さんは、キャラクター作成をメインでやられている方なので、ブログのヘッダー画像作成の依頼はどうなのかなと思っていました。
ですが、相談した所こころよく引き受けてくれました。 相談してみるものですね！
依頼内容
- 画像の構図→ 「左側にキャラクター」＋「中央の文字デフォルメ」＋「右側キャラクター」でお願いしたい。
- 左側キャラクターは、左側を向いて座ったような状態でマスクの表情は「笑顔」。
- 右側キャラクターは、立った状態で右斜め上を向いていてマスクの表情は「悲しみ」。(悲しくても前を向いて歩いていくをイメージ)
- 中央の文字デフォルメは、「ネイネイ」の部分を葉っぱで表現、「喜怒哀楽」の部分をつたor丸太風で表現して欲しい。
- 納品画像の大きさは、1500 x 300ピクセルでお願いします。(← 後でのべる問題があり、最終的にこの大きさでお願いしました)
上記の内容で依頼をすると、次の日にラフ画像と共に「キャラクターの大きさ」と「文字の大きさと配置」を確認するための３案の提示がありました。
その提示案を見ながら、やり取りを2~3度した後にラフ画像の完成となり、ペン入れと着色に以降しました。
着色の際に「葉っぱの部分の文字」がぼやけてしまっている事を伝えると、機転をきかせて主線を追加してこの部分を際立たせていただきました。
完成したヘッダー画像
依頼から9日で下記のヘッダー画像が完成しました。
キャラクタ1体 2000円 x 2と文字デフォルメの2500円でトータル6500円でした！！
この安さでここまでのクオリティなら大満足です。
MEMO
当ブログでは現在、WordPressテーマ「ストーク」 
を使用しています。
ストークを使用している場合下記のコードを子テーマの「style.css」に書き込む事でロゴの大きさを調整ができます。
パソコン用のヘッダー画像の大きさを調整するコード
.header.headercenter #logo a img {
max-height: 175px;
width: auto;
}
モバイル用のヘッダー画像の大きさを調整するコード
@media only screen and (max-width: 480px) {
#logo {
max-width: 70%;
}
#logo a img {
max-height: 50px;
}
}
問題だったヘッダー画像の大きさ
依頼にあたり一番最初に確認しておいた方がよいのがヘッダー画像の大きさです。
自分は今回の依頼で、ホームページとツイッターの両方で画像を使用したかったので、当初は大きさをツイッターにあわせて1500 x 500ピクセルでお願いしていました。
ホームページが1000 x 200ピクセルで、ツイッターが1500 x 500ピクセルなので大きい方にあわせれば何とかなるでしょ、と思っていましたがダメでした。
縦横の比率が違うことで、ホームページに張り付けた時に見栄えが悪かったです。(>_<)
※ホームページは、ブログテーマ等によって多少違いますので参考程度にしてください。
そこで、ホームページの縦横の比率は変更せずにできるだけツイッターの大きさに近づく「1500 x 300ピクセル」にしました。
( ↓ は、無償ツールのPhotoScapeXを使用しています。)
- PhotoScape Xを起動して「写真編集」を選択。
- 右クリックして表示された項目から「新規…」をクリック。
- 幅と高さを「1500 と 500」に設定します。
- 必要であれば「背景の色」も設定します。
- 設定ができたら「OK」を押します。
これで背景が設定できましたので、ヘッダー画像を挿入していきます。
右上の「挿入」を選択します。
表示されたリストの中から、「イメージ」をクリックしてヘッダー画像を挿入します。
ヘッダー画像を下記の青枠内のように貼り付けて、右下の「保存」をクリックしてツイッター用のヘッダー画像の完成です。
まとめ
ブログとツイッター両方のヘッダー画像を1つで対応する場合は、「1500 x 300」で作成できました。
あなたもココナラで、ヘッダー画像を作成してみてはいかがでしょうか。
それでは、まったです。 (‘◇’)ゞ
Checkココナラのキャラクター制作のりん＊ さん
コチラで紹介している「ココナラでブログ・SNS用にオンリーワンのキャラを描いてもらった！」の記事もよかったらどうぞ。
関連ココナラでブログ・SNS用にオンリーワンのキャラを描いてもらった！
コメント