デザインを開発するという視点でお伝えするクリエイティブBLOG
何かと便利なpsd素材。さまざまなデザインの素材が配布されていますが、今回紹介するのはハイクオリティなpsd素材を集めた「42 Free High-Quality Photoshop PSD Files For Web Designer – Part II」です。
（3 Billboard Templates | FREE PSD FILES）
アイコンからモチーフ、デザインパーツなど、豊富な種類が収録されており、お気に入りの素材を見つけることができそうです。気になった素材をピックアップしていますので、下記よりご覧ください。
さまざまなテイストのデザインが豊富に配布されているpsd素材。いくつあっても嬉しい、そんなpsd素材をダウンロードできるサイトをまとめた「30+ Best Websites to Download Free PSD Files」を今回は紹介します。
（photoshop | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials）
バリエーション豊かに、いろいろなデザインで活用できる素材を収録したサイトばかりが集められています。中でも気になったサイトをプックアップしたので、以下よりご覧ください。
詳しくは以下
デザイン制作をする上で役に立つフリー素材は、持っているだけでとても重宝します。そこで今回紹介するのは、ハイクオリティなフリーphotoshop素材を集めた「Free Resources for Designers」です。
（18 High Resolution Acrylic Sponge Brushes | Premium Pixels）
テクスチャやボタン、エフェクト、パーツなど、さまざまな種類の素材が数多く収録されいます。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
webデザインを行う際にとても便利なpsdの素材。持っていると何かと便利で重宝すると思います。そんな中今回紹介するのは、 様々なpsd素材を集めた「50 Free High Quality and Inspirational PSD Files for Download」です。
（Wraps and Ribbons pack by *plakkert on deviantART）
使い勝手のよいデザインパーツから、webデザインにそのまま使えそうなものまで種類は豊富。中でも気になったものをいくつかピックアップしました。
媒体を選ばず、幅広く利用されているクリエイティブツールphotoshop。利用されているシーンも多く、そのため、photoshopのための素材は世界中で数多く公開されていますが、今日紹介するのはWEB制作に便利な60種類のアイコン、ボタンPSD素材をまとめた「60 PSD Icon and Button Templates」です。
WEB制作では、ボタンやアイコン等、細かな素材のクオリティが全体のクオリティを決定づける要素の一つになりますが、細かな処理やデザインを加えるというのは小さな素材といえども時間がかかります。原文では、時間を短縮できる便利につかえるpsdがまとめられていましたが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
WEBデザインを制作される際に、photoshopを利用してデザインを制作するという方も多いと思いますが、今回紹介するのは成果物のPSDファイルとチュートリアルがセットになったエントリーをまとめた、PSDで学ぶWEBデザイン「Modern UI and Layout Tutorials for Photoshop」です。
Clean Web Layout with the 960 Grid
チュートリアルだけではどうしても分かりにくかった部分が,完成後のPSDも併せてみることで、作り方や構造を直接学ぶことができます。今日は紹介されているものの中からいくつか気になったモノをピックアップして紹介したいと思います。
詳しくは以下
photoshopのブラシは手軽にデザインに彩りを与えることができる優れた機能として、多くのデザイナーに愛されています。そこで今回は、デザインを華やかに演出するフリーブラシセット「25 Most Popular Photoshop Brush Sets from BrushLovers.com」を紹介したいと思います。
（Pop Dots – Photoshop Brushes – BrushLovers.com）
デザインがパッと明るくなるような、POPなデザインのブラシがさまざまなバリエーションで展開されています。気になったブラシを選んでみましたので、下記よりご覧ください。
詳しくは以下
フリーで配布されているフォントの中にもさまざまな種類があり、色々な種類をストックされている方も多いのではないでしょうか？そんな中今回紹介するのは、スタイリッシュかつ個性溢れるデザインフリーフォントをまとめた「Stylish Free Fonts For Graphic Designers」です。
デザインを引き締めてくれたり、印象的な雰囲気に仕上げられるデザインフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webサイトを一からデザインするとどうしても時間がかかってしまうもの。時にはフリーで配布されている素材を使用することで、効率的に仕上げることができると思います。今回はそんな時に参考にしたい、フリーフラットUIキットまとめ「30 Free and Flat UI Kits for November 2014」を紹介したいと思います。
L Bootstrap Freebie – UI Kit Inspired by Android L on Behance
いろいろなタイプのフラットテイストなフリーUIキットがまとめられており、便利に活用することができるようになっています。
詳しくは以下
ディスプレイ領域が多様化し、対応する最小解像度次第では、背景部分が大きく見えることも多く、背景のデザインがWEBサイト構築に置いても、印象を決定づける大きな要素の一つになりつつありますが、今日紹介するのは一枚でクリエイティブ感を演出するブラー背景素材をまとめたエントリー「Useful Blurred Background Resources」です。
こちらは、雰囲気のある光がボケたような表現の背景素材をまとめたエントリーです。いくつか紹介されていますが、今日はその中から幾つかきになったものをピックアップして紹介したいと思います。
詳しくは以下
12 Blurred Backgrounds
1600×1200のjpgで背景素材が12枚まとまっています。落ち着いた感じの光です。
Blurred Landscape Images
こちらは光ではなくて、写真をぼかしたもの。背景に置くことで遠近感も演出できます。
Light Kit Ps
様々なひかりの演出の写真セット。
上記の他にも様々なボケが効いた背景素材がまとめられています。サイトの印象をガラリと変えてみたいという方は是非どうぞ。
A Handy Collection Of Useful Blurred Backgrounds Resources | DesignWoop
スケジュールや日付表記などをデザイン上で表現するのに役立つカレンダータイプのアイコン。ベースがシンプルなだけに、デザインに工夫を凝らしたさまざまバリエーションが存在しています。今回はそんなカレンダーアイコンをまとめた「30 Beautiful Sets Of Free Calendar Icon」を紹介したいと思います。
詳しくは以下
テイストによって使い分けができる多彩な種類のアイコンがまとめられています。中でも気になったものをまとめてみましたので、下記より御覧ください。
国内外ともに人気のブログツールWordPress。人気の秘密には配布されているテーマの豊富さがありますが、今日紹介するWordPressテーマ「Leopress」は一風変わっていて、タイトルにもあるようにMacOSX Leopardを再現したWordPressテーマになっています。
スクリーンショットを見てもおわかりになるとおり、本当にOSの画面のようです。背景や、アイコン、メニューの処理など細かいところに凝っていてここまでかというくらいMacOSX Leopardに近づけてあります。
詳しくは以下
webデザインを1から制作し完成までたどり着くには、かなりの時間と労力を必要とします。さらに、今ではスマートフォンからタブレットまで、ありとあらゆる端末への対応が求められることも多いのではないでしょうか？今回はそんなシーンに活用できる、レスポンシブルHTML5フリーテンプレート「High Quality Yet Free Responsive HTML5 Templates」を紹介したいと思います。
（Royale – Free html5 Template | html5mania.com）
HTML5形式の、高品質で実用性の高いフリーテンプレートが紹介されています。
詳しくは以下
制作のチュートリアルを見てもイマイチ操作方法が分からない、その通りの結果になってくれない…チュートリアルを見ながら制作を進めていて、そんな事に陥ったことも勉強中という方にはあるかと思います。
Patterns and Shapes in Adobe Illustrator
今回紹介する「50 Excellent Adobe Illustrator Video Tutorials」はグラフィックスの制作のためのビデオにチュートリアルを50個集めたエントリーです。実際の操作を見ながら学ぶわけなので文字とスクリーンショットのチュートリアルよりもかなり分かりやすいかと思います。今日はまとめられている中から、いくつかのビデオチュートリアルをピックアップして紹介したいと思います。
詳しくは以下
WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか？今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。
こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。
動画は以下から
