DIYは楽しい♪自分でヘッダー画像のイラストを描いてみた

このブログのヘッダーにイラストでアクセントをつけてみました。使ったアプリはPhotoScape、ColorPalette、Windowsのペイント。すべて無料です。絵心はないので図形の組合せだけですが、素人でもなんとかなるもんだな~と嬉しくなっております。(*^^)v

色見本

このブログ、
wordpressなので、
デザインは手作りです。

とはいえ、
デザインって、
難しい。

作った当初は、
ヘッダーの背景色を選んだり、
フリーの写真を貼ってみたり、
少しはやってみたのですが、

いまいちピンとこず。
(・_・)

あまり主張しない程度の、
シンプルな無料イラストを貼って、
3ヶ月放置していました。

ヘッダー画像

先日、
娘からLINEが。

見た目がシンプル過ぎて、
ちょっと物足りないと。
(゜o゜)

やっぱりそうか。

うーん。

よし、
色のあるデザインに、
変えてみよう。
(‘ω’)ノ

ということで、
とりあえず、
フリーの素材を探す。

しかし、
気に入ったものを探し当てるのは、
けっこう大変。

というか、
見つからなかった。
(;´・ω・)

仕方がないので、
自作することにしました。

(って)
(そんなに簡単に)
(できるのか!?)

できあがったのが、
これです。
(*’ω’*)

ヘッダー画像

色のついた点点点。

これが、
今回自作したイラストです。
( *´艸`)

できあがりは、
結局シンプル。
( ̄▽ ̄)

でも、

ど素人の私にでも、
ヘッダーのイラストが作れた!

ってのが、
めちゃ嬉しい♪
ヽ(^。^)ノ

今回私は、
手持ちの無料アプリのみを使って、
作ってみました。

もしかしたら、
作り慣れた人からすると、
まどろっこしいやり方かも。

ちゃちゃっとできる、
簡単無料アプリも、
あるのかも。
(‘◇’)ゞ

でもまあ、
なんとかなったので、
その方法を書いてみます。
(*^^)v

画像のサイズを確認する

まず、
ヘッダー画像の、
サイズを確認します。

このブログのヘッダーは、
1350×130pxです。

ちなみに、
表示されたページ上で、
画像のサイズを知りたい時は、

「ものさし」ツール、
「定規」ツール、
と呼ばれるフリーソフトを使うと、
便利ですよ。

私は、
Google Chromeブラウザの、
PageRuler
という拡張機能を使っています。

PageRuler

これを使って、

PageRuler

赤線枠を指定すると、

PageRuler

幅1349pxで、
高さが130pxだよー、

という風に、
教えてくれます。
(^-^)

「ペイント」でベースを作る

サイズが分かったので、
画像のベースを作ります。

ここでいうベースとは、
イラストも何も描いていない、
無地の画像のこと。

使ったのは、
Windowsに付属している、
アクセサリーの中の、
「ペイント」です。

ペイント

「ファイル」-「新規作成」で、
新しいファイルを作ります。

「イメージ」-「サイズ変更と傾斜」で、
別ウインドが立ち上がるので、

ペイント

「縦横比を維持する」のチェックをはずし、
「単位」は「ピクセル」を選択して、

水平方向と垂直方向の数値を、
作りたい画像ベースのサイズにします。

ここでは、
水平方向:1350px
垂直方向:130px
(*’ω’*)

「OK」をクリックすると、

ペイント

1350×130pxの、
白い四角ができました。

(ここで色をつけたり)
(枠をつけたりできます)

「ファイル」タブ-「名前を付けて保存」で、
好きな画像形式を選んで保存します。

ペイント

これで、
ヘッダー画像のベース、
「ヘッダー画像_ベース」ファイルの、
できあがり♪

ヘッダー画像

(*^^)v

「PhotoScape」でイラストをデザインする

次は、

ベースの上に、
図形などを描いて、
イラストを作っていきます。
٩( ”ω” )و

使うのは、
画像編集アプリです。

「PhotoShop」などの
高機能ソフトや、
フリーの画像編集アプリは、
たくさんありますが。

私が使っているのは、
PhotoScape(フォトスケープ)」です。

PhotoScape

簡単で分かりやすいので、
重宝しています。

よく使う機能は、
・リサイズ
・明るさ調整
・文字入れ
・イラスト描き
・切り抜き(トリミング)
・モザイク処理
・複数の画像を一括して変換
など。

フリー(無料)なのが、
とってもありがたい。
(*´ω`*)

では、
簡単図形イラストを
描いていきます。

PhotoScapeの「画像編集」機能
を立上げ、

ヘッダー画像のベースを
表示させます。

PhotoScape

編集メニューの
「オブジェクト」タブを開いて、
好きなオブジェクトを使います。

オブジェクトには、
・スタンプ
・画像挿入
・テキスト
・図形
などがあります。

たとえば、
「図形」の「四角塗りつぶし」をクリックし、

PhotoScape

ベース画像の上で、
マウスで描画する。

(四角を3つ、丸を1つ、描いてみました)

PhotoScape

こんなんをいっぱい描いて、
ヘッダー用に、
デザインしていきます。
(*’ω’*)

(この時点では)
(色はまだテキトー)

ウェブ上で見つけた、
フリーのイラストなんかを、
「画像挿入」で読み込んで配置すれば、

○△□より、
もっと凝ったデザインもできますね。
( *´艸`)

色見本で使う色を決める

フリーのイラストは、
すでに色がついているので、
色変更はしませんが、

オブジェクトから描いた、
○△□などの図形は、
色も自分でデザインできます。

なので、
色をつけてみましょう。
( `ー´)ノ

でもその前に。
(゜o゜)

どんな色にするのか。
どんな組み合わせにするのか。

それって大事ですよね。
(‘ω’)ノ

自分でテキトーに色をつけてみる、

ってのも、
もちろんあり。

でも、
時短したい方、
自分で考えたくない方、
(私みたいに)
(センスに自信がない方も)

ステキな配色を、
ウェブから見つけましょう!

こんなありがたいサイトが、
あるんですよ~。
( *´艸`)

・「Color Hunt
・「サルワカ-おしゃれで使いやすい配色パターン見本集

(きっと他にもたくさんあると思う。。)

わたくしは、
この配色を選んでみました。
(*´ω`*)

配色パターン

「ColorPalette」でRGB色コードを取得する

ところで。

気に入った色が見つかったとして、
その色って、
何色?
(゜o゜)
ですよね。

もちろんちゃんと、
色別のコードがあります。

なので、
使いたい色の色コードを、
取得しなければなりません。
(・o・)

「Color Hunt」さんや
「サルワカ」さんのサイトでは、
色コードもちゃんと、
教えてくれるのですが。

配色パターン

この「#7EC2C2」などが、
色コードです。

ただしこれは、
16進数の色コード。

ウェブを作るHTMLやCSSの中で、
色を指定するときに、
この16進数のコードを使います。

そして、
色コードには、
10進数の表記もあります。

R:255、G:255、B:255

のような、
RGB表記です。

アプリによって、
16進数かRGB表記か、
違うんですよね~。
(めんどくさい)
(;^ω^)

さらに、
ウェブ上でステキな色見つけた!
けど、
色コードとか書いてない。。
という場合もあります。
(・_・)

そんな時便利なのが、
色抽出アプリです。
(カラーピッカーなどとも言います)
(*’ω’*)

画面上の色の上に、
スポイト形のカーソルを乗せると、
その色の色コードを表示してくれる、

というアプリ。

私が使っている、
フリーのアプリはこちら。

FE Color Palette(FEカラーパレット)」

FEカラーパレット

(ずいぶん昔から使っているやつ)

上のピンクの色は、
16進数で「#e67a7a」
RGBで「R:230、G:122、B:122」
なのですね。
(‘ω’)ノ

左下の「画面の色」をクリックすると、
カーソルがスポイトに変わります。

画面の外にある場所にも対応するので、

色見本のページを表示しておいて、
そこをスポイトでクリックすると、

FEカラーパレット

FE Color Paletteに、
色とコードが表示されました。

色コードが分からなくても、
こうやって取得できるのです。
(*^^)v

「PhotoScape」で色を塗る

色コードがゲットできたので、
「PhotoScape」で作りかけていた、
イラスト図形を塗りましょう!
ヽ(^。^)ノ

PhotoScape

一番左端の四角を選択し、
ダブルクリックすると、
別ウインドウで「プロパティ」が、
立ち上がります。

PhotoScape

真ん中あたりの、
色選択ボタン(青のところ)をクリックし、
パレットを出します。

PhotoScape

「More Colors」を押して、
「色の設定」画面へ。

PhotoScape

「色の追加」ボタンの上の、
「赤」「緑」「青」に数値を入れると、
色を作ることができます。

(このアプリは)
(RGB表記を使っているのですね)

さて、
この四角形は、
先ほどゲットしたアクアブルー?
「R:126、G:194、B:193」
で塗ることにします。

手順は、
(1) 「作成した色」の枠のどれかを選択する
(2) 色コードRGBの数値を入力する
(3) 「色の追加」をクリック
※これで「作成した色」の枠内に作った色が表示される
(4) 「OK」をクリック

PhotoScape

(2)のRGBの数値は、
FE Color Paletteを横に表示して、
その数値を見ながら入力すると、
楽かもしれません。

PhotoScape

(もちろん)
(あらかじめRGB数値を)
(メモしておいてもよいです)

(4)で「OK」を押すと、

PhotoScape

左端の四角形が、
青からアクアブルー?に、
変わっています♪
ヽ(^。^)ノ

さらに「OK」をクリックすれば、
図形の色の変更は、
完了です。
(*´ω`*)

こんな手順で、
図形を配置したり、
色を塗ったりして、
ヘッダー用の画像ができあがりました。

ヽ(^o^)丿

ヘッダー画像

(小さすぎて)
(見えーん)

ヘッダーとして設定する

あとは、
この画像に、
名前を付けて保存し、

WordPressの管理画面で、
ヘッダー画像として設定。

これでできあがりです♪

ヘッダー

(※2019年6月現在はこのヘッダー画像ではありません)

(*´ω`*)

DIYは楽し♪

なんとか、
自分の好きなデザインで、
ヘッダーを飾ることができました。

嬉しい。
( *´艸`)

できあがってみると、
ただの点点点。

でも満足しています。

このデザインに決めるまでに、
□を使ったり、
○と□を組み合わせたり、

色見本を見ても、
この組み合わせにしようか、
いややっぱりあっちにしようか、

実際に何個も何個も、
いろんな画像を作りました。

(何時間もかかった)
((;^ω^))

ものづくりって、
こういう所もまた、
楽しいですよね。
(*´ω`*)

できあがりを見た娘にも、
「イイやーーーん!」
と言ってもらって、
母嬉しい。
(^_^)v

飽きたらまた、
違うの考えよ。

(デザインを考え直してたら)
(なんと)
(タイトルも変わっちゃいました)

(わはは)

( ̄▽ ̄)

コメント

タイトルとURLをコピーしました