透明ノイズと紙テクスチャ。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。 そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。 透明ノイズ 「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。 Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてました（※下図は2013年9月現在。今は透明じゃないノイズになってます）。 Firefoxの「画像だけを表示」 body要素のスタイルに、下記のように指定されてました（※下記ソースコードは2013年9月現在）。 body { background: #222
アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介
最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作！となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい！などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね！ こちらは拡大レンズがついているので
単調な背景にノイズをのせて繊細なテクスチャにするチュートリアル
Photoshopの標準機能だけを使って3ステップで、単調なベタ塗りの背景にノイズをのせて繊細なテクスチャにするチュートリアルを紹介します。 Noise Texture in Photoshop 左：ベタ塗り、右：ノイズ有り 下記は各ポイントを意訳したものです。 1. ベースのレイヤーを作成 新規ファイルを作成し、新しいレイヤーを作ります。そのレイヤーにベースとなるカラーを塗ってください。下記は暗いグレー「#272727（原文：142e51）」にしています。 2. ノイズのレイヤーを作成 さらに新しいレイヤーを作成し、ホワイト（#ffffff）で塗ります。[フィルタ]-[ノイズ]-[ノイズを加える]を選択し、量を「15%（原文：25%）」にして「OK」ボタンをクリックします。
ウェブデザインにおけるテクスチャやパターンの使い方をしっかり学びたい人用のまとめ
当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。 テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。 The What, Why and How of Textures in Web Design 下記は各ポイントを意訳したものです。 1. ノイズのテクスチャ 2. リアルにするためのテクスチャ 3. ビジュアル効果を与えるテクスチャ 4. トーンや印象を明確にするテクスチャ 5. シンプルなピクセルパターンの繰り返し 6. 大きなインパクトを与えるパターン 1. ノイズのテクスチャ ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。 ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱ
無料で大量の背景テクスチャをダウンロードできるサイト「Subtle Patterns」
Webページなどの背景テクスチャをいろいろ試したい場合に、約300種類あるテクスチャを選択してダウンロードできるサイトが「Subtle Patterns」です。このテクスチャは商用利用もOKとのこと。テクスチャの確認とダウンロード方法は以下から。 Subtle Patterns | Free textures for your next web project http://subtlepatterns.com/ 約300種類ある背景テクスチャは以下の通りです。番号はサムネイル表示にしたときのページになっています。 ◆01 ◆02 ◆03 ◆04 ◆05 ◆06 ◆07 ◆08 ◆09 ◆10 ◆11 ◆12 ◆ダウンロード方法 公式サイトにアクセスすると、リスト表示でテクスチャが表示されています。 気に入ったテクスチャをダウンロードする場合は…… テクスチャの左下にある「Download
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
和紙のテクスチャやパターン113種類。商用OKのフリー素材。 ｜https://wp.yat-net.com/name
新着記事
新着記事
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP