覚えておきたいと思いメモしていたのが溜まってきたので、自分用の整理兼ねてまとめました。 ウォーターカラー、グランジ、ウッド、ペーパー、ピクセルなど背景・テクスチャ・パターン素材全50種類です。 使いやすそうなシンプルなものから主張が強めのものまで様々なタイプがありますが、上手く取り入れることでデザインをグッと良くさせることができます。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
覚えておきたいと思いメモしていたのが溜まってきたので、自分用の整理兼ねてまとめました。 ウォーターカラー、グランジ、ウッド、ペーパー、ピクセルなど背景・テクスチャ・パターン素材全50種類です。 使いやすそうなシンプルなものから主張が強めのものまで様々なタイプがありますが、上手く取り入れることでデザインをグッと良くさせることができます。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
「CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。 以下に使ってみた様子を載せておきます。 まずCSS Gradients with background-blend-modeにアクセスしましょう。 このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。 サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてくださ
Tips in Using Background Pattern for Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ビジターを知る コンテンツは明確に コンテンツの強調に暗い背景を 限られたエリアのみにパターン パターンを全体に サイトのテーマに則したパターン シンプルなデザインには軽いパターンで パターンの多用に注意 パターンで視線を誘導する パターンをテクスチャと組み合わせる 異なるパターンを組み合わせる デザインにはフレッシュさを 洗練されたデザインに はじめに パターンは今日、ウェブデザインだけでなく、ビジネスカード、壁紙、包み紙など数多くその使用を見ることができます。 パターンとは一定の形状をもったセルが繰り返しと定期性によって配置されたもので、その種類はタイル、ライン、スワールなど何千何百とあります。 そのパターンをウェブデザイン
秋冬にもぴったりな落ち着いたデザインのテクスチャやパターン素材をIcon Depositから紹介します。素材は全て、個人でも商用でも無料で利用できます。 素材のダウンロードは、各ページ下でツイートかフォローのボタンをクリックすると自動で始まります。
草・木をはじめ、ざらっとした紙、デニム地、布地、皮、ライトとダークな繊細な柄など、シームレスなパターン素材をWeb Designer Labから紹介します。 素材は全て個人でも商用でも無料、リンクなども必要なしで、もちろんリンクしてくれる分には大いにありがたい、とのことです。
以下、ダウンロードできる素材はPhotoshop用のパターン（PAT）で、CS3にも対応しています。 ※CS6でももちろん使えます。 素材は全て個人でも商用でも無料で利用できます。 詳しくはダウンロードファイルの「license.txt」をご覧ください。
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
商用利用無料、細かいパターンの繊細なざらっとしたパターン素材 -Arcandres Minimal Patterns
初めまして、@poyosiです、こんにちは。 Webデザインなどで壁紙を作る際に便利そうなテクスチャを100枚作りました。 このブログの制作や、他Webサイト制作でノイズがかった背景や、ちょっと変わった背景が必要だったので自分用にちょっとした加工で簡単に背景が作れるテクスチャを色々用意しました。 大きめの画像にしたので、Webサイトの背景などで繰り返し（リピート）使用しても繰り返し部分が目立たなくなるようになっています。個人利用可、商用利用可なので、もしよろしければWebサイトの背景やバナーの背景を作るときに自由に使ってみてください。 テクスチャ一覧 Photoshopでテクスチャを使ってみよう 1：パターンを登録しましょう。 パターンに登録したいテクスチャ画像をPhotoshopで開きます。 「編集」 > 「パターンを定義」からパターンを登録します。 2：背景画像を作ってみましょう。 新
クリスマスやレース地など、かわいらしいPhotoshop用のパターン素材を紹介します。 [ad#ad-2] パターン素材はPhotoshop用で、シームレスなテクスチャが作成できます。 Christm
TOP > Design , Photoshop > フリーのpsd素材をダウンロードできるサイトをまとめた「30+ Best Websites to Download Free PSD Files」 さまざまなテイストのデザインが豊富に配布されているpsd素材。いくつあっても嬉しい、そんなpsd素材をダウンロードできるサイトをまとめた「30+ Best Websites to Download Free PSD Files」を今回は紹介します。 （photoshop | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials） バリエーション豊かに、いろいろなデザインで活用できる素材を収録したサイトばかりが集められています。中でも気になったサイトをプックアップしたので、以下よりご覧ください。 詳しくは以下 ■F
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
