さりげなく美しい質感を加えたい、かわいすぎないかわいいデザインにしたい、といった時によさそうなシンプルなピクセルを使ったPhotoshop用のパターン素材を紹介します。
![シンプルなピクセルなのにすごい!さりげなく美しい質感を背景に与える商用利用無料のパターン素材](https://cdn-ak-scissors.b.st-hatena.com/image/square/04015935b7a26916942b90557656e0cbfe84c3b2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015021802.png)
こんにちは、デザイナーの姐さんです。 毎度シームレスネタですが、今回もです! 結構需要があると思うんです、ポリゴンスタイルをPhotoshopでシームレス化。 基本は前回の「Photoshopで芝生やレンガの写真からシームレスなパターンテクスチャ素材を作る方法」と同じです。 ざっくりポリゴンパターンを描く ペンツールで三角形をつなげてポリゴンパターンを作ります。色はグレースケールの濃淡4色ぐらいにしました。 上の図のように、外側の三角形の頂点を画面ギリギリにして、反対側とラインを揃えておくと、後々の仕上がりがよくなります。 オブジェクトが複数のままだと「スクロール」が使えないので、ある程度描いたところですべてを選択して、右クリック→「スマートオブジェクトに変換」。 スマートオブジェクトにしておけば、後から色を替えたりもできるので、ただ結合するよりオススメです。 フィルタ「スクロール」を使う
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ:下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント:Google Fonts (Raleway, Lato) アイコン:Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
Best Free Seamless Wood Plank Textures To Enhance Your Design For designers, it is essential to have various resources such as brushes, patterns, textures and more to create more attractive designs. These resources give designers greater abilities to add striking effects and elements that may give some zest to their works. Now I know how time-killing it is to look for the right resources for your
Written by Yasir Jawaid• September 19, 2014• 10:03 pm• Pattern and Texture • 3 Comments Pattern Design – 35 Seamless Free Vector Patterns Vector pattern design can be used for printing onto fabric, paper, scrap booking or website background. This is a beautiful collection of vector pattern designs you will find heart pattern, floral pattern, retro, stripe and dot shape pattern designs. You may be
Denim is a sturdy textile that is not only significant for fashion but is also useful in graphic design. These wonderful materials are used in many designs including texture overlays, background fills, etc. that can effectively enhance any design. Today, you’re in for a freebie treat that we have instored for this post. Take a look and you’ll find some Free Seamless Denim Textures that we have gat
Asphalt is a material that is usually used in road constructions. But they also have a role in graphic design as wonderful textures that can add grunge, roughness and more to your designs depending on how you make use of them. Let us consider adding some new set of textures with this freebie collection below. I’ve surfed the net and found these Free Seamless Asphalt Textures that might be of use t
About This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div. For browsers that don't support the HTML5 video tag, it just uses an image. Warning Don't abuse this code... Don't use it too often, too many video instances will slow down the browser. Please bear in mind bandwidth usage for both you, and your visitors
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も! Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時(前の記事)からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
Metals are one of the abundant materials that are used especially in the industrial era. But as the new digital age enters the scene, metals have never seized to be a handy tool for engineers and designers alike. In the world of graphic designing, metals also have a great role in creating impressive designs through their textures and effects. Today we’ll be on for a treat with these Free Seamless
Flowers are one of the prettiest things you can find around the world. With their beautiful colors and various shapes, they never fail to disappoint our eyes and admiration. What’s even better is their beauty can be used in adding more charm to our designs. Scroll down and check out what we have instored for you. For our creative designers, I have collected a series of beautiful and Free Seamless
Pro designers have created a number of design projects, each with different motifs and themes. For them to create impressive designs, they have a lot of resources in their arsenal reserved for their next projects. With the many kinds of design resources available, one of the mostly used resources are textures. These are used in creating amazing backgrounds, textile effects, or anything that genera
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
Designers can never have enough resources for their arsenal. It’s always an advantage to have a wide variety of resource collections that you can use anytime for your present or future designs. With this, we will be showcasing a series of freebies that you can download and use for your work. Today get the chance to add some resources to your design arsenal with these Free Seamless Grass Textures.
Textures are one of the most used resources especially for web and graphic designers alike. They have proven to greatly help designers in creating amazing effects to their works. A Seamless Textures is an image of a texture that can be placed side-by-side with itself without creating any noticeable edges between the two combined. By combining these images multiple times, it creates an illusory eff
ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。 ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。 Cool Gradient 実装は非常にシンプル、コピペで簡単に利用できます。 HTML デモではdivとspanの二つを使用していますが、背景用にはdiv一つのみでOKです。 <div><span>Cool Background</span></div> CSS まずは、美しいグラデーションのスタイルシートから。 グラデーションの設定は楕円(ellipse)状でボックスの一番遠い角に合わせて(farthest-corner)います。 div { position: fixed; width: 100%; height: 100%; background-image: -webk
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く