デザインを開発するという視点でお伝えするクリエイティブBLOG
大空を自由に舞い、美しい羽根を持つ鳥。デザイン制作シーンでは、グラフィックの中にアクセントとして取り入れることもあるかと思います。そんな中今回ご紹介するのは、鳥をモチーフにした素材集「Birds & Feathers Graphic Pack」です。
Birds & Feathers Graphic Pack — download free by PixelBuddha
まるで絵本のキャラクターのように温かみのあるタッチで描かれた、可愛らしい鳥のイラスト風素材が一式揃っています。
詳しくは以下
最近では様々な素材データが無料でダウンロードできるようになり便利になりました。そんな中今回紹介するのは、個性的な色使いとデザインが目を惹くパターン素材「Mint & Lavender Vector Patterns」です。
フランスのデザイナーが手がけたインパクトのあるパターンデザインです。
詳しくは以下
Webやグラフィックデザインを手がけるデザイナーにとって、時間短縮や作業効率はとても重要な課題です。そんな時に役に立ってくれるアイテムが今回紹介する、豊富に揃ったアイコンやイラストのベクターセット「25 Flat Design Freebies You Should Download」です。
Shopping round icons set Vector | Free Download
様々なジャンルのベクターデータが揃っている中から、いくつか気になったものをピックアップしてみました。
詳しくは以下
(さらに…)
師走に入り、寒さの厳しい季節が到来。デザイン業務でも、冬らしさや季節感を求められることも多いのではないでしょうか。今回ご紹介するのは、そんな冬を感じさせるデザインにぴったりな、霧や氷の表面を思わせるテクスチャセット「Arctic Frost Textures」です。
Arctic Frost Textures — download free textures by PixelBuddha
見ているだけでひんやりするような、冷たさの伝わるハイクオリティなテクスチャセットです。
詳しくは以下
絵の具で描いた手描きの雰囲気は味があっていいもの。しかし、デジタルでその雰囲気を手軽に出したい、そんな時に手助けしてくれるのが今回紹介する、まるで絵の具で描かれたような風合いが再現されたツールキット「Artistic Studio: Acrylic Toolkit」です。
シームレなステクスチャと手書きのベクターを合わせて使える便利なセットです。
詳しくは以下
クリスマスの向けてクリスマスカードやプレゼント、パーティー準備をして楽しんでいる方も多いのではないでしょうか。そんな中今回紹介するのは、クリスマスシーズンに最適なべクターデータのセット「Free Christmas Vector Set (Cards, Backgrounds, Patterns etc.)」の紹介です。
クリスマス用のツールが簡単に作れるイラストやパターンのセットです。
詳しくは以下
アナログな表現を実現するのに便利なのがphotoshopブラシ。今日紹介するのはアクリル絵の具のフリーphotoshopブラシが今回紹介する「40 Free High-Res Acrylic Paint Photoshop Brushes」です。
絵の具といっても様々なタイプがあり、盛られたものからかすれた物、書き殴ったものまで様々なブラシが登録されています。
詳しくは以下
デザインに手軽に華を添えられるテクスチャは、できる限り豊富にストックしておきたいもの。そんな中今回紹介するのが、レトロな印象を表現できる花柄のテクスチャセット「Hi-resolution floral paper textures」です。
紋のようなデザインから、渋めの色味が特徴的なデザインまで、テイストの異なる5種類の花柄テクスチャがセットになっています。
詳しくは以下
デザインには欠かせないツールphotoshop。非常に便利なソフトウェアで、多くの方が利用していると思います。今回紹介するのはphotoshopを主に使ってデザインをされている方に便利な、デザインされたボタンやテキストなどが簡単に作れるphotoshopレイヤースタイルを750個以上あつめたエントリー「Ultimate Roundup of 750+ Free Photoshop Layer Styles」を紹介したいと思います。
Vista Glass Style by ~lost–in–thought
グラデーションなどのシンプルなモノからカーボンメッシュのような作り込んだものまで、様々なphotoshopレイヤースタイルがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
以前「仕上がりを見ながらFavicon制作できる「favikon」」と言う記事で、仕上がりを確認しながらFaviconを作成できるWEBサービス「favikon」を紹介しましたが、今回も同じく仕上がりを確認しながらFaviconを制作できるWEBサービス「Genfavicon」を紹介したいと思います。
操作する順に連番が振ってあるインターフェイスは「Favikon」と比べると親切かなと思いますが、操作、仕上がりなどは「Favikon」と大差はありません。ひとつ異なる点は、16×16、32×32、48×48、64×64、128×128とトリミングのサイズを選んでトリミング後の画像データを生成したfaviconと共に保存できるようになっているところです。
詳しくは以下
Designdevelopでも多々とりあげてきたphotoshopブラシですが、今日紹介するのはハイクオリティかつ実作業にも使えそうフリーphotoshopブラシを集めたエントリー「25 Free Photoshop Brushes」を紹介したいと思います。
集められているブラシは様々で、フラクタルから煙り、テープ、血痕、毛並みなどなど様々です。今回は紹介されているものの中からいくつかピックアップして紹介したいとお思います。
詳しくは以下
素材感を感じさせたいデザインを制作する際には、テクスチャから模様を抽出したりといろいろな工夫が必要となりますが、一つ一つのパーツ制作に時間もかかってしまいます。そんな中今回紹介するのが、さまざまなスクラッチ柄を表現できるPhotoshopブラシをまとめた「A Collection of Free Scratch Brushes for Photoshop」です。
scratch II by ~ShadyMedusa-stock on deviantART
金属でこすったようなスクラッチ柄から、えんぴつで描かれたようなスクラッチ柄まで、表現力の高いブラシばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
Webサイトの修正において、細かいものであればHTMLやCSSのみで対応してしまうことがあると思います。もちろんデザインを事前に作る事は重要だと思いますが、時にはプログラムのみで解決できてしまう手軽さも必要なのではないでしょうか。今回紹介するのはそんな手軽さをより強く感じさせてくれる、アイコンフォントのまとめ「15 Useful Free Icon Fonts for Designers」です。
通常、HTMLに「A」と記述すれば「A」と表示されますが、アイコンフォントを使用すれば対応するアイコンが表示される仕組みとなっています。どれも扱いやすいものばかりですが、中でも気になったものをピックアップしましたので、下記よりご覧ください。
Some Random Dude — Iconic is Becoming Awesomer
ファイル関連を中心に、さまざまな種類のアイコンを収録したフォント。スタンダートな見た目なので使うシーンを選びませんね。
Maki | A clean point of interest icon set from MapBox | MapBox
スポーツ関連など、Webとはあまり関係のないものが収録されたアイコンフォント。リアルと結びついたデザインに使えそうです。
Modern Pictograms – The Design Office
ポップ調のアイコンが集められたフォント。子ども向けのデザインによく合いそうです。
利便性からすると、全てアイコンセット内で解決する事ができるのであれば、アイコンフォントを利用するという選択肢もありそうです。
近年流行になりつつあるグラデーション表現を取り入れたデザイン。背景やボタンなどのベタ面に、シンプルながらもニュアンスをつけることができ非常に便利な手法です。そんな今回ご紹介するのは、グラデーションの配色パターンを30種類まとめた「coolhue」です。
キュートな印象を与えるフェニミンなグラデーションから、コーポレートサイトにピッタリな先進的なカラーリングまで多数のグラデーションパターンが揃います。
詳しくは以下
さまざまな画像加工を得意とするPhotoshopですが、効果的にエフェクトを利用するには技術と豊富な知識が必要になります。そこで今回紹介するのが、エフェクトを効果的に利用した画像加工チュートリアル集「10 Special Effects Photoshop Tutorial」です。
画像のテイストを変化させられるチュートリアルから、CG合成のようなチュートリアルまで、表現の幅を広げられる技術やアイデアが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。
こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。
詳しくは以下
GIFのマークをクリックするとGIFアニメーションがスタートし、再度クリックすると元に戻ります。挙動については、デモサイトが準備されていましたので「Gif Preview with jquery」からご覧ください。
クリックでイベントが起きるため、スクロール位置などイベントを作っておけば、表示位置に来たら自動的に再生するなんてこともできそう。使い方次第ではグッとサイトが良くなるかもしれないjQueryプラグインだと思います。ソースコードはgithubにて公開されておりましたので、試してみたい方は「Fork it on Github」からどうぞ。
