デザインを開発するという視点でお伝えするクリエイティブBLOG
Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。
水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。
詳しくは以下
レトロや格調高い雰囲気などをデザインに落とし込みたい際に役立つのが、ヴィンテージ風加工。しかしいざ自作するとなると、凝った加工を行うのは中々難しいもの。そんな時に利用したい、ヴィンテージ風加工を楽に行うことが出来るテキストエフェクト「Hometown Vintage Effects Pack」を今回は紹介します。
PSD形式の完成されたヴィンテージ風のエフェクトを楽しむことが出来る、おすすめのエフェクトセットです。
詳しくは以下
(さらに…)
メインビジュアルや見出しを作るときなど、打ち文字だけでは物足りない…そんな物足りなさを補ってくれる、テキストエフェクトをまとめた「25 Insanely Creative Text Effects You Can Use For Free!」を今回は紹介いたします。
シンプルで使いやすいエフェクトから、特殊な表現に使える質感が作り込まれたものまで多数のエフェクトが紹介されています。幾つか気に入ったエフェクトをご紹介しますので、ご覧ください。
詳しくは以下
(さらに…)
レタッチやエフェクトなど、デザインのビジュアル作りに写真加工は欠かせません。写真加工の引き出しを増やすと、デザイン幅もより広がります。今回ご紹介するのはデザインの幅が広がる、多数のテイストのレタッチやエフェクト技法をまとめたPhotoshopチュートリアル「23 New Exciting Adobe Photoshop Tutorials to Enhance Your Skills」です。
全てPhotoshop CCを使用したチュートリアル選で、印象的なビジュアル作りや、いつもとタッチを変えたい時に便利。下記ではその中から気になった素材を幾つかピックアップしてご紹介しています。
詳しくは以下
PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。
一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。
詳しくは以下
デザインの中でさまざまな役割を持つ文字要素は、メイングラフィックのサポート的存在ではなく時にはメイン要素となる時も。そんな時に文字をより魅力的に演出できるエフェクトチュートリアル集「New Amazing 2D and 3D Text Effect Tutorials (26 New Tuts)」を紹介したいと思います。
How to Create Space Tiles Text Effect in Photoshop |
2D・3Dと、平面立体さまざまな種類のエフェクトが分かりやすく解説されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
サイトのメニューやちょっとしたインターフェイスに役立つアイコン。今日紹介する「twotone icons for free! 」は超シンプルなピクトグラムアイコンです。
「twotone icons for free! 」は100パーセント無料でブログ、ウェブサイト、アプリケーションまたはイントラネット上で使用する事が可能ということです。ピクトを見てもお分かりになる通り標準でほとんどのものが網羅されていてバリエーションも豊かなのです。
詳しくは以下
7月に入り本格的に夏の到来を感じるこの頃。夏をテーマにしたデザインを手がける機会も増えてきたのでは無いでしょうか？今回ご紹介するのは、そんな今の時期だからこそ使いたい夏をモチーフにしたアイコンまとめ「Free Icon Sets for Summer 2018 that will Heat up Your Designs」です。
Summer Sales 50 free icons (SVG, EPS, PSD, PNG files)
デザインに夏らしさを取り入れたいときに便利な、夏を連想させるモチーフのアイコンが全部で9種類紹介されています。さらにその中からいくつかおすすめのものをピックアップしましたので、ご覧ください。
詳しくは以下
(さらに…)
アナログ感を与えたり、荒荒しさを表現したり、デザインの定番とも言えるグランジ。それだけに国内外で多くのグランジを取り入れた、または表現するための素材が公開されていますが、今日紹介するのはフォント・パターン・テクスチャあらゆるグランジ素材を集めたエントリー「Ultimate Grunge Toolbox for Web Designers」を紹介したいと思います。
10 Seamless Grunge Patterns .png
非常に多くのグランジ素材が集められていますが、今日はその中から特に気になったソイ剤をいくつか紹介したいと思います。
詳しくは以下
もうすぐクリスマス。直前となってクリスマスカードを作っているそんな方もいるかと思います。今日紹介するのはクリスマスの雰囲気を盛り上げてくれるフリーフォントを集めたエントリー「10 Free Christmas fonts」を紹介したいと思います。
Download Porcelain-so you can share it with other people and use it for free
コミカルな書体から、きれいめな書体まで様々なフォントが紹介されていますが、今回はその中から気になったものをピックアップしていくつか紹介したいと思います。
詳しくは以下
WEBデザインで最も重要な要素の一つナビゲーション。今日紹介するのは良質なナビゲーションを制作する為の例を紹介しているエントリー「30 Examples of Attractive Nav」を紹介したいと思います。
Typographica Typographica
良質なナビゲーションの種類と実例を紹介しながら、まとめられています。今日はその中からいくつか気になったナビゲーション例をピックアップして紹介したいと思います。
詳しくは以下
文字のストロークの端にある小さな飾りがあるセリフ体フォント。セリフが無い書体と比べると、特徴的な印象が強いのですが、今日紹介するのはキレイ目からPOPまであらゆるセリフ書体を集めた「43 Free Serif Fonts to Dream of」というエントリー。
Butler – FREE FONT on Behance
Licence: Free for private and commercial use
Format: OTF
様々なタッチのセリフフォントが集められており、ライセンスやフォーマットも合わせて明記されています。今日はその中でも気になったフォントを幾つかピックアップしたいと思います。
詳しくは以下
フォントはいくつあっても困ることのないアイテムです。これまでも数々のフォントを紹介していますが、今回紹介するのは、デザイン性の高いプロユーザーも使えるフォントまとめ「 25 fresh free fonts from 2018」です。
シンプルなフォントから個性的なものまで様々なフォントが集約されたサイトの紹介です。中でも気になったものをいくつかピックアップしてみました。
詳しくは以下
WEBを制作する上でもっとも重要な要素ともいえるユーザーインターフェイス。WEBサイトの趣旨やコンテンツにもよりますが、どんなに格好がいいデザインであっても、どんなに便利な機能があったとしてもユーザーインターフェイスがよくなければだいなしになってしまいかねません。今日紹介するのはユーザーインターフェイスの例を集めたサイトをまとめたエントリー「25 UI Inspiration and Design Pattern Resources」を紹介したいと思います。
いくつかのサイトが公開されていますが、その中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
ロゴでもチラシでも、ポスターでもゼロから作り上げるのはとても大変です。しかし何かしらのベースや元になるもの、部品があればその作業はかなり短縮される場合が多いです。今日紹介する「Logo Temlater」は
「Logo Temlater」で配布しているロゴテンプレートはどれも無料で使用する事ができます。
詳しくは以下
血糊のような表現ができるphotoshopブラシ集が今回紹介する「AngryBlue」です。何となく血糊のようなホラーなシェイプが多々収録されています。なかなか広告では使えないかもしれませんが、イメージ作りが必要なグラフィックには使えそうなブラシセットになっています。
「AngryBlue」は「AB Set 1」「AB Set 2」と二つのブラシが公開されています。上記の画像は実際にブラシを用いて作ってみた画像です。
詳しくは以下
