美しいぼけやブラーを描いたり、写真の背景に目立つようテキストを磨りガラスに載せたり、モザイクやラインを使って幾何学状にしたり、美しい背景をつくるPhotoshopのチュートリアルを紹介します。 各チュートリアルは30分くらいで出来るものなので、ぜひお試しあれ。
![Photoshopで美しい背景をつくる!グラデーションやブラーの効果的な使い方が学べるチュートリアルのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/aab9673a05e0d5c1d36bd4d2a70817ae48601916/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031301-01.png)
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します! ↑私が10年以上利用している会計ソフト! CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
CSS-Tricksにhr要素の表示をCSSを使ってカスタマイズする興味深いサンプルが掲載されている。グラデーション効果、破線効果、影付き効果、両端にデザインの追加、二重線と記号の配置などだ。注目したいのは画像などの要素を追加することなく、CSSのみでデザインを実施している点にある。手軽にデザインを変更する方法として興味深い。 グラデーションはbackground-imageにlinear-gradientを指定することで実現している。破線はborder-bottumにdashedの指定。影付き効果はbox-shadowが指定されている。興味深いのは両端にめくれ上がった線が2本記述されている7つ目のサンプルだ。基本的にはborder-radiusによる指定だが、height、border-width、margin-topなどをうまく組み合わせることでこれを実現している。
Gradients By Jxperiment [ad#ad-2] ダウンロードできるグラデーション素材は、全部で54種類のグラデーションが揃っています。 下記はPhotoshop CS5にインストールしたものです。 Photoshopのキャプチャ ダウンロードは無料でできますが、ライセンスの明記がないため、特に商用利用の際には問い合わせをした方がいいかもしれません。 また、同作者のWeb 2.0用のグラデーション素材もあります。
下の画像は、左:適用前のグラデーション(ディザ有り)、右:適用後のグラデーションです。 適用前にはグラデーションにバンディングの縞模様があり汚いですが、適用後のものは縞模様がなくなり綺麗なグラデーションとなっています。 Photoshop Tip: Spatter [ad#ad-2] 上記で紹介されているのは非常に簡単な方法で、Photoshopのはねフィルターを使用します。 メニューバーの[フィルター]-[ブラシストローク]-[はね]を選択します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く