こんにちは！千明です。
サロンブログなど、世界観を大事にするサイトデザインに背景パターンは欠かせませんね。アフィリエイターのブログは、ほとんど無背景ですけどね。
- 自分好みの背景を探すにも、なかなかこれといったものが見つからない。。
- やっと見つかった背景素材はフリーじゃない。。
- 見つかったけど継ぎ目が汚い！
そんな時は、自分で背景パターンをを作ってしまおう！
今回は、
- 無料で簡単
- 継ぎ目なしできれい
- 世界で1つだけのオリジナル
このような背景パターンの作り方をご紹介します。
きれいな背景パターンの作り方
背景パターンは、小さい画像をタイルのように張り巡らせて作りますよね。
私はこれまでいろいろな背景画像をダウンロードしては、使ってみたのですが、きれいに貼れないことが多くて困っていました。
どうしても継ぎ目ができてしまうのです。
継ぎ目ができるとこんな風になりきれいじゃないですよね。素人感丸出し。
これでも、背景用の画像を使っているのに、です。
継ぎ目ができないシームレス背景を探すと、配布しているサイトはあるのですが、なかなか好みの画像がないので、さらに探すと、無料で自作できるサイトを発見しました。
それが、patternicoです。
patternicoで作った画像がこちら↓↓
シームレスできれいにはまっています。
サクッと簡単にできましたよ。
patternicoの使い方
patternicoの画面です。最初からこのパターンができています。
中央にある四角のキャンパスで基本パターンを作り、周りがプレビューになっています。
patternicoでは、左にあるタスクバーにあるアイコンを選んでパターンを作る方法と、手持ちの画像を使ってパターンを作る方法があります。
最初にアイコンを使って作成し、基本的な操作方法をご説明しますね。
基本的な操作方法
新規作成は、Create Newです。
まっさらになったら、最初に使用したいアイコンを左のアイコン集からドラッグアンドドロップで作業キャンパスに入れます。
ここからスタートです。
アイコンの入れかた
アイコンは、Font awesomeからドラッグアンドドロップで作業キャンパスに入れます。
Line iconsは、初期設定ではスクロールできなくなっています。
他のラインアイコンを見たいときは、上にある検索窓・Enter Keyword for searchにアルファベットを一文字入れてみてください。すると、スクロールできるようになります。
hをいれると、なんとなくhで始まるものが出てきます。
背景色
背景色を変えたいときは、Background Colorです。
新規作成をして、作業キャンパスが空だと背景色を変えられません。まず最初にアイコンを1つ作業キャンパスに入れてから、背景色を変更します。
透過性
画像の透過性も変えられます。
Shapes Trasparency 100％にすると、はっきり。
%を下げるとやんわりします。
Canvas Sizeでは、作業キャンパスのサイズを変えられます。
ダウンロード
出来上がったパターンをダウンロードするには、こちらをクリックします。
ポップアップが出てくるのでもう一度DOWNLOAD PNGをクリックすると画像が出てきます。
右クリックして、名前を付けて画像を保存にて保存します。
個々の画像要素の操作
個々の画像に対して拡大・縮小、変色、複製、削除、回転などの操作が可能です。
拡大・縮小
変色
パレットでもよいですし、直接カラーコード指定もできます。
カラーコードはこちらのサイトでお世話になっています。原色大辞典
複製
削除
回転
手持ちの画像でパターンを作る
手持ちの画像でもパターンが作れます。
+Costom images を押すと、選択画面が出てくるので、画像を開きます。
あとは、同じように編集して使用します。
大きすぎる画像は、頑張って縮小して使いました。
downloadして使うとこんな感じです。
+ Custom backgroundを使うと、同じように手持ちの画像を背景に設定することもできます。
背景パターンを作れるpatternicoのまとめ
作業キャンパスを150×150にして、小さいパターンを作りました。
こんな風に、作業キャンパスの大きさを変えると雰囲気が変わります。
やっているうちに、万華鏡を除いているようで、楽しくなって没頭してしまいました。時間泥棒にご注意です！
きれいに継ぎ目がないパターンが簡単にできますので是非お試しください！
