当サイトには広告が含まれております

パターンで作るフリーの背景画像サイト「Bg-Patterns」は使い勝手が良くて超おしゃれ

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

このところKindleで本を出版しようとしてその1その2とブログを書いています。その3ではいよいよ表紙を作ろうかなというところになりました。自分はデザイナーではないのでどんな風に作ればいいかわからなかったのですが子供向けの本を参考に「表紙の背景は明るい感じの幾何学模様で!」と思いました。そして検索したところとっても良いフリー背景サイト「Bg-Patterns」を発見したので今回はこちらの紹介をしようと思います。

記事をざっと見る

Bp-Patternsではセンスのいい背景素材が豊富に配布されています!

Bp-Patterns

ネットで検索して、このサイトを見た瞬間にデザインがかっこよくてしびれました(^^)/

こちらの素材は

WEBやDTP、ビジネス資料などで使える背景素材を商用可でフリー(無料)ダウンロードできる『Bg-Pattrens』。
色や形、サイズも自由にカスタマイズして自分のオリジナルの背景を作ろう。

商用も可能なフリー素材です。

メニューのカテゴリーから、自分がほしい素材のカテゴリーを選んで

一覧の中から背景を選ぶことができます。

気に入った背景をカスタマイズしてダウンロードする方法

使いたい背景が決まったら背景素材をダウンロードするのですがそのときに、カスタマイズをすることができます。

モンドリアン風ですごくかっこいいです!この画像をクリック

このページに遷移します。右側に今の状態で背景として使ったときの状態がプレビューされています。

1:背景のパターンがいくつかありますので好きなものを選びます
2:サイズ 背景のサイズを変えることができます
3:ファイル ファイル形式を選択します
4:グランジ ダメージ加工のあり/なしを選びます

サイズをLLにしてみました。この状態で使いたいので 表示中のパターン画像をダウンロード をクリックします。PCの任意の場所に保存されます。

実際に背景を素材として使う方法

保存したファイルは p-pt_0251-xl_pt_02510.jpg このような名前のものでした。このファイルを開くと

このように、一通りのパターン部分だけの画像となっています。この画像の場合はこのままでも使えそうですが、パターンを繰り返して表示させたい場合はHTMLを作ると繰り返した状態の画像になります。

HTML拡張子(xxxxx.html)のファイルを作り、そこに

<html>
<head>
</head>
<body background="p-pt_0251-xl_pt_02510.jpg">
</body>
</html>

このようにbodyの背景を今ダウンロードした画像ファイル名にしてブラウザで表示させると

このように繰り返した状態の背景になります。私の場合は画像の素材として使いたいので、ブラウザで表示された背景をハードコピー(画面キャプチャ)して、画像ソフトなどで加工をしました。

うーん、背景がかっこいいとなんだかとてもかっこいい(^^)/

SPECIALカスタマイズ

と、最初はそのように繰り返しのパターンを取得していたのですが、SPECIALカスタマイズ という方法で好きな大きさの画像を作ることができることが判明しました(>_<)。SPECIALカスタマイズはそれだけでなく、より細かなカスタマイズができます!

このパターンをクリック

プレビューの左端にある SPECIALカスタマイズ をクリック

サイズを決める

このような画面になって のところでダウンロードする画像のサイズパターンのサイズを決めることができます!

色を決める

背景の色と使われている色の数分だけ1つずつ指定することができます。ランダム色変更 をクリックすれば、デザイン知識のない人でも何度かクリックするうちに

こんな風に自分の好みの組み合わせにたどり着けるかもです。

グランジを追加する、グランジのサイズを変更する

グランジとはダメージ加工のことで、グランジのパターンを選んだりサイズを変更したりすることができます

試しに

こんな感じに指定すると、画像は

このようにダメージ加工が施されました。

効果を追加する

ここから集中線などの効果を追加することができます。

試しに、この効果をクリックすると

このような画像になりました。

カスタマイズした画像をダウンロードする

カスタマイズした画像は

この PNGダウンロードJPGダウンロード をクリックすることでダウンロードできます。

その前に

使いたいサイズとパターンの大きさを決めました。

ダウンロードしたファイルを開くとこういう画像ができていました。

パターンを使ったヘッダーやバナーに使えそうですよね(^^)/

おまけ:Bg-Patternsで選んだ、お気に入り

すべてを見たわけでは無いんですが、今回使った以外で見つけたお気に入りのパターンをこちらに貼っておきます。

シームレスなカラフルな横のストライプ背景

北欧風のデザインが素敵です。

シンプルな丸の重なりパターン

シンプルな丸が使い勝手良さそうです。上下逆にしてもいいかな?

四葉のようなパターン素材

これもやはり北欧風というか…バナーとかに使ったら良さそうです!

パターンが素敵でかっこよくて、カスタマイズも自由自在にできるこんなサイトを作っていただきTopeconHeroesさん、ありがとうございます(^^)/

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る