デザインを開発するという視点でお伝えするクリエイティブBLOG
web制作を行う中で使用頻度の高いアイコン、特に最近はフラットテイストが主流になっており、フリーで配布されているものもバリエーションが豊富になっています。今回はそんなフラットアイコンまとめ「25 Free and Flat Icon Sets for August 2014」を紹介したいと思います。
Dribbble – Free vector icon set by Valentyn Khenkin
いろいろなテーマで制作されたフラットアイコンのセットをダウンロードできるものが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
世界にはいろいろな形の建物が存在しており、時にデザインシーンで建物を表現するためにイラストを使用することもあると思います。そんなときに便利に活躍してくれそうな、さまざまな建物をアイコン化した「Building Icons Set」を今回は紹介したいと思います。
40種の建物をモチーフとし展開。アイコンとしてセットでダウンロードできるようになっています。
詳しくは以下
デザイン構築に必要な素材として重宝されているアイコン。セットでいろいろな種類がまとまっているものが多数配布されており、さまざまなタイプをダウンロードしストックされている方は多いと思います。そんな中今回紹介するのは、UI構築に使用するための必要最小限のアイコンがセットになった「Essential Icons」です。
フランクフルトを拠点にアートディレクターとして活動するDaniel Swoboda氏によって提供、ベーシックに定番として頻繁に使用すると想定される種類のアイコンがまとめてダウンロードできるようになっています。
詳しくは以下
もはやwebデザイン制作に欠かすことのできないアイコン素材。たくさんストックし、いろんなデザインシーンで活用されている方はとても多いと思います。今回はそんなアイコン素材をまとめた「38 Beautiful Icons In PSD For Web Designers」を紹介します。
フラットから立体的、ラフなテイストまで、さまざまな種類のアイコンセットがまとめられています。
詳しくは以下
webデザインを中心に活躍してくれるアイコン。テイストやテーマなど、さまざまな種類のものがフリーで配布されていますが、今回紹介するのは、フリーキッチンアイコンセット「Free Download : In The Kitchen Icon Set」です。
フード系デザインに活用したい、ラインで描かれたキッチンツールが揃ったアイコンセットとなっています。
詳しくは以下
インターネット上でショッピングをする際の決算方法として、クレジットカードを使用する方は非常に多いと思います。決済は非常に重要な工程であるため、デザイン的にも分かりやすく案内してあげることが重要。今回はそんな時に必要な素材の一つ・クレジットカードビジュアルをアイコン化した「27 Free Credit Card Icon Sets for Online Web Shops」を紹介したいと思います。
Dribbble – 1 Color Credit Icons by Chad Pugh
さまざまな表現のクレジットカードのアイコンセットが、27種まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまなテイストのフォントがフリーで配布されており、ジャンル別にピックアップされているデザイナーの方も多いのではないでしょうか。そんな中今回紹介するのは、手書きのラフな雰囲気を表現できるフリーハンドライティングフォント集「50 Free Handwritten Fonts | Fonts」です。
手書きならではの自由なタッチ、フリーで広がり感のあるデザイン性を演出できるフォントが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
商品に施されているパッケージデザインのはさまざまなものがありますが、今回はクリエイティブなグラフィックが魅力のパッケージデザイン「25 Inspirational Package Designs」を紹介したいと思います。
食品や雑貨、プロダクト、化粧品など、いろんな分野のパッケージの優秀なデザインが集められています。
詳しくは以下
難しい説明をデザインの力で誰にでも分かりやすく伝えるインフォグラフィックが注目を集め、そのようなデザイン制作の依頼も増えているのではないでしょうか？そこで今回紹介するのが、インフォグラフィックデザインに使いやすいデザイン素材まとめ「UI Kits and Other Free PSD Resources for Building Infographics」です。
（Free Vector Infographic Kit | MediaLoot）
表やグラフをはじめとした統計データを見やすく表現できる素材や、アイコンなどのユーザーインターフェースを意識した素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
アイコンは、さまざまな種類がセットになっている状態でダウンロードできることがほとんど。一度に多彩なバリエーションを手に入れることができるのも嬉しいところです。そんな中今回紹介するのは、3サイズ揃ったラインアイコンセット「100 Responsive Line Icons」です。
シンプルで柔らかいテイストのアイコンが100種、セットでダウンロードできるようになっています。
詳しくは以下
デスクトップ上でどのようにサイトやコンテンツが見えるのか？そのイメージ作成に便利なブラウザのモックアップ、今回はそのまとめとなる「10 Free Web Browser Mockups (PSD, AI)」が公開されていますので、紹介したいと思います。
Dribbble – FREE!! Safari PSD by Alec Douglas
シンプルベースないろんなブラウザに応用できるものから、各社ブラウザに特化したデザインのものまで、厳選された10種のフリーモックアップが紹介されています。
詳しくは以下
デザインをする上でインパクトのあるものを仕上げるためには、フォントや装飾アイテムがポイント。イメージにあった素材をうまく選定する必要があります。そんな時に参考にしたい、個性的な印象でインパクトを与えるタイポ&ベクターセット「Pool Riders Typeface + Bonus Vector Cut-Outs」を紹介したいと思います。
タイポとベクター素材がセットになった使い勝手のよいアイテムです。
詳しくは以下
就職活動をする時に必ずといって良いほど必要になってくる履歴書。一般的には、無難なフォーマット化された用紙に記入することがほとんどだと思いますが、今回は履歴書でクリエイティブ性をアピールしたい時におすすめなフリーテンプレート集「Free Professional CV/Resume and Cover Letter PSD Templates」を紹介したいと思います。
Resume templates — Яндекс.Диск
特に、アート・デザイン・クリエイティブ系の就職活動をされる方におすすめの、今までにないデザイン性の高い履歴書テンプレートが揃っています。
詳しくは以下
WordPressのロゴを光らせるチュートリアル「Creating A Lens Flare」を実際に試してみました。ネタ元は英語だったので手順を実際に試した結果をお見せしながら日本語で紹介したいと思います。
photoshopで新規カンバスを作ることから始まります。サイズはW1600×H800pxが好ましいとしています。そして新しく出来上がったカンパスを黒く塗りつぶします。
作ったカンバスのセンターにロゴマークを配置します。ロゴは小さすぎても大きすぎてもダメで、大体下記の画像ぐらいの割合でロゴを配置します。
まずロゴをコピーしてレイヤーを重ねます。さらに片方のロゴは背景の黒と統合してください。そして統合している方のロゴにフィルタのレンズフレア105mm Primeを70-100％の間でかけます。
レンズのフィルタをかけたレイヤーをコピーして、透明モードをカラーに設定。光らせた色でレイヤーをすべて塗りつぶします。「D」が飽いているから微妙な感じになってしまいましたが、こうする事で下記のように色を入れて光らせる事ができます。
大元のロゴをコピーして、明るさを調整後ぼかしをかけます。チュートリアルでは30pxでかけています。その後ぼかしをかけたロゴの透明モードをハードライトへ
先ほどぼかしをかけたロゴを複製透明モードをオーバーレイへこれでロゴの周りが光ったようになるはずです。
チュートリアルにはさらに続きがあり、もっとアーティスティックにする方法が書かれていますが今回は割愛したいと思います。詳しくは「Great Design: Creating A Lens Flare With The WordPress Logo- Photoshop」をご覧下さい。ちなみに最後までやり遂げると一番上の画像のようになります。
普通ではつまらないと思い「DesigDevelop」のロゴでも試みたのですが、同じ方法をとってみましたが、下記のようになり、残念な結果になりました。
ロゴによりけりなチュートリアルなので試すならWordPressもしくはそれらしいロゴで試した方が良いかと思います。
Great Design: Creating A Lens Flare With The WordPress Logo- Photoshop
手書きのフォントは程良いアナログ感と柔らかさを与えてくれるフォントで、さまざまなデザインに利用できます。今日紹介するのはクオリティの高いフリー手書きフォントを集めたエントリー「20+ Most Amazing Free Handwritten Fonts for Web designers」。
手描きなので、どの文字がキレイと思うのかは好みが分かれるところだと思いますが、手描きの欧文フォントが全部で20個紹介されています。
詳しくは以下
前回「WordPressのログイン画面集「Change Color of Your WordPress Login」」と言う記事でWordPressのログイン画面のデザイン集と変更方法を紹介しましたが、今回はログイン画面の変更を簡単にするプラグイン「BM Custom Login」を紹介したいと思います。
こちらのプラグインを導入すれば簡単に分かりやすくWordPressのログイン画面を変更する事が可能です。
詳しくは以下
