Sunday June 26 2016 category:blog
背景画像
適当にPhotoshopで加工するのが好きなので、ブログのタイトルの背景画像も毎回自分で作っています。
(スマホ専用デザインでは反映されなかったかも…スマホやガラケーでご覧の方には全く退屈な話でごめんなさい)
写真を加工して一枚絵のような背景画像を作るのが理想なのですが、用意している画像のサイズは、4000×400px。
最近の素材サイトさんで提供してくださる写真は、大変ありがたいことにかなり大きいサイズが多くて横幅4000pxも難なくクリアしているのですが、問題は縦幅(;´・ω・)
もともとのサイズそのまま使うと、ブログのタイトル部分の背景としては被写体が大きすぎて一部しか入らず、これなーんだ?というクイズのような状態になってしまいます。
かといって、縦幅に収まるようにリサイズすると横幅が圧倒的に足りなくなってしまいます…
元写真を背景にうっすらぼかしてみたり、写真の端から足りない部分はグラデーションでごまかしてみたり、同じ写真を合わせ鏡のように並べてみたりしますが、やっぱり素人、下手の横好きなので、処理がうまくないのです(´・ω・`)
じゃあ、ブログタイトル背景部分の『ブラウザの画面の大きさに追従する』横幅をやめればいいじゃん!っていう気もしますが、ここまで頑張ってきたのでなんとなく意地のような気持ちもあります(まったく意味のない頑張りと意地)
そこで、パターン背景(いってみればタイルを敷き詰めるような感じ)にすれば一挙解決じゃないかね?と、昨夜思いつき、作ってみたのがこれ↓
ハニカムのパターンを切り取って、ひとつひとつに色を入れたり、写真をはめ込んだりして作りました。
作ってるときはすごく楽しかったのですけど、これ、並べると、背景としてはタイトルが読みづらいという視認性の問題(そもそもうちの背景はだいたいそんなのが多いですけど…)、それから、特定の写真が目立ちすぎて、背景画像を横に並べました!というのがはっきりわかってあんまり見栄えが良くなかった…(´・ω・`)
パターンを作るならもうちょっと横長に作って、パッと見『敷き詰めてる』感がないほうがいいなー、というのが昨夜の反省です。
それで今回、1800×400pxで作ってみました。
ハニカムはあまりにもうるさすぎたので、水玉にしました。
でもハニカムデザインもあきらめていません(笑)
水玉パターンを作るところから始めて(暇すぎる)塗りつぶし、色を付けたところでさらにパターン化して作りました。
これ↓
なんか苦労した割にはしょぼいよ…('A`)
センスがないので、そこはどうしようもないです。
今回学習したこと
・ガイドの新設
なにこれ、めちゃくちゃ便利…(;゚Д゚)
若干視認性は上がりましたが、やっぱり見づらいタイトル…(;'∀')
すみません…
で、いったい何を主張したい記事なのかというと、没にしたハニカム背景をブログに残しておきたいなー!というそれだけの記事でした。
(わーここまで読ませといてこれかよ!と思われたかた、ごめんなさい)
Photoshop用のパターン
22 Hexagon Photoshop Patterns (PAT)
※下のほうにダウンロードボタンがあります
ここまで読んでくださいましてありがとうございました!
DOCTOR HEAD'S WORLD TOWER -ヘッド博士の世界塔 NowPlaying
追記:
上記の水玉画像はシームレスじゃない!!!ということにさっき気づきました(あほじゃ…)
それでサイズを変えてシームレスにしました…
1650×400pxです。
psdデータ残しておいてよかった…(;'∀')
ついでに、ドーナツ写真に差し替えてみました(*'▽`)
おいしそう♡
(スマホ専用デザインでは反映されなかったかも…スマホやガラケーでご覧の方には全く退屈な話でごめんなさい)
写真を加工して一枚絵のような背景画像を作るのが理想なのですが、用意している画像のサイズは、4000×400px。
最近の素材サイトさんで提供してくださる写真は、大変ありがたいことにかなり大きいサイズが多くて横幅4000pxも難なくクリアしているのですが、問題は縦幅(;´・ω・)
もともとのサイズそのまま使うと、ブログのタイトル部分の背景としては被写体が大きすぎて一部しか入らず、これなーんだ?というクイズのような状態になってしまいます。
かといって、縦幅に収まるようにリサイズすると横幅が圧倒的に足りなくなってしまいます…
元写真を背景にうっすらぼかしてみたり、写真の端から足りない部分はグラデーションでごまかしてみたり、同じ写真を合わせ鏡のように並べてみたりしますが、やっぱり素人、下手の横好きなので、処理がうまくないのです(´・ω・`)
じゃあ、ブログタイトル背景部分の『ブラウザの画面の大きさに追従する』横幅をやめればいいじゃん!っていう気もしますが、ここまで頑張ってきたのでなんとなく意地のような気持ちもあります(まったく意味のない頑張りと意地)
そこで、パターン背景(いってみればタイルを敷き詰めるような感じ)にすれば一挙解決じゃないかね?と、昨夜思いつき、作ってみたのがこれ↓
ハニカムのパターンを切り取って、ひとつひとつに色を入れたり、写真をはめ込んだりして作りました。
作ってるときはすごく楽しかったのですけど、これ、並べると、背景としてはタイトルが読みづらいという視認性の問題(そもそもうちの背景はだいたいそんなのが多いですけど…)、それから、特定の写真が目立ちすぎて、背景画像を横に並べました!というのがはっきりわかってあんまり見栄えが良くなかった…(´・ω・`)
パターンを作るならもうちょっと横長に作って、パッと見『敷き詰めてる』感がないほうがいいなー、というのが昨夜の反省です。
それで今回、1800×400pxで作ってみました。
ハニカムはあまりにもうるさすぎたので、水玉にしました。
でもハニカムデザインもあきらめていません(笑)
水玉パターンを作るところから始めて(暇すぎる)塗りつぶし、色を付けたところでさらにパターン化して作りました。
これ↓
なんか苦労した割にはしょぼいよ…('A`)
センスがないので、そこはどうしようもないです。
今回学習したこと
・ガイドの新設
なにこれ、めちゃくちゃ便利…(;゚Д゚)
若干視認性は上がりましたが、やっぱり見づらいタイトル…(;'∀')
すみません…
で、いったい何を主張したい記事なのかというと、没にしたハニカム背景をブログに残しておきたいなー!というそれだけの記事でした。
(わーここまで読ませといてこれかよ!と思われたかた、ごめんなさい)
Photoshop用のパターン
22 Hexagon Photoshop Patterns (PAT)
※下のほうにダウンロードボタンがあります
ここまで読んでくださいましてありがとうございました!
DOCTOR HEAD'S WORLD TOWER -ヘッド博士の世界塔 NowPlaying
追記:
上記の水玉画像はシームレスじゃない!!!ということにさっき気づきました(あほじゃ…)
それでサイズを変えてシームレスにしました…
1650×400pxです。
psdデータ残しておいてよかった…(;'∀')
ついでに、ドーナツ写真に差し替えてみました(*'▽`)
おいしそう♡
* tag cloud *
Amazon AneLaLa Apple aroma Books Chrome Classic comics DIY? docomo DX Firefox Flowers GAME Gmail Google iTunes LaLa livly LoveLive! Music Music Unlimited Mystery Recipe Ringo ScanSnap SF SF? Smartphone SONY VAIO Windows Windows10 windows8.1 WindowsXP お店 こどもの本 さっぽろ雪まつり ウイルスバスター ブログカスタマイズ 凛花 別冊花とゆめ 増刊flowers 洋画 理科の本 親の本 邦画 雪 非常時対策