デザインを開発するという視点でお伝えするクリエイティブBLOG
デザインに強調したい部分がある時、ECサイトなどでピックアップ情報を表示したい時などに利用すると効果が高まるバナー。自身でデザインに合わせて作ってももちろん良いのですが、今回はフリーで利用できる、魅力あふれるベクター形式のフリーデザインバナー集「30 Vector Banner Freebies」を紹介したいと思います。
Mesh banners template Vector | Free Download
さまざまな形状のベクターバナーがピックアップされ、紹介されています。気になったものを以下よりご覧ください。
詳しくは以下
加工が便利なので、非常に使いやすいillustratorのブラシ。Designdevelopでも以前「illustratorで使えるベクターフリーブラシ「A Huge Compilation of 60 Free Illustrator Brushes」」や「230本収録！マーカーのベクターデータ集「230 Marker Illustrator Brushes」」といくつか紹介していましたが、今日紹介するのもフリーで使えるillustratorのブラシセットをまとめたエントリー「30 Sets of High-Quality Adobe Illustrator Brushes」です。
水彩系からデジタル系まで幅広いジャンルのブラシが集められています。今日はその中からいくつ描きになった物をピックアップして紹介したいと思います。
詳しくは以下
デザインに応用できるテクスチャ素材は、できるだけたくさん所持しておきたいもの。中でも活用範囲の広い、商用利用可能な素材はとても重宝します。そんな中今回紹介するのは、商用化＋デザインに活用できるテクスチャセット「6 Exclusive and Free High Quality Photoshop Textures」です。
壁や砂を素材とした、種類の違う6パターンのテクスチャがセットになっています。
詳しくは以下
デザインにとって重要な役割をもつフォントは、数え切れないほどの種類が存在しており、何を使えば良いのか悩んでしまうことも多いかと思います。そんな時チェックしたい、シーン別で使い分け出来る多種多様な風欧文フォントがまとめられた「90+ Best Free Fonts, Spring 2017」です。
非常に多種多様なフリーフォントがピックアップされており、デザインに華を添える、お気に入りのフォントを見つけることができそうです。
詳細は以下
近いうちに発売が開始されるのではと噂されているiPhone8。毎回注目の新しい機能追加などがあることもあり、今から期待されています。今回はそんなiPhone8のモックアップ素材「iPhone 8 Mockup PSD Freebie」を、いち早くご紹介したいと思います。
今注目のデバイスのモックアップが、発売前に手に入るのは嬉しいところ。持って入れば基本アイテムとして活用できる素材となっています。
詳しくは以下
(さらに…)
非常に便利なwordpressは広く活用されており、もはや欠かせない存在になっています。そんな中今回紹介するのは、使いやすさが考慮されたフリーwordpressテーマ10選「Top 10 Best Free WordPress Themes」です。
WordPress › Hitchcock « Free WordPress Themes
シンプル・洗練されたデザインテーマが紹介されており、どれも使いやすさが考慮されたものばかり。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
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
数種類の色が組合わさって成り立っているチェック柄だからこそ、自分の思っていた色使いのチェックがなかなか無かったり、デザインに合った配色のチェックを探し出すのは一苦労。そんな時に役立つチェックパターンのみを集めた「800+ Free Intricate Plaid Patterns to Enhance your Designs」をご紹介します。
（Colorburned | 25 Woven Plaid Swatches）
明るい柄から落ち着いた柄まで、その数800点。きっと欲しいパターンが見つかるでしょう。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインでイメージしている色を配置したいと頭で想像していても、実際にその色を数値などで出そうと思うとなかなか難しいもの。今回はそんな時に活用できそうなサイト「ColorFavs」を紹介したいと思います。
好きな写真のカラーを簡単にカラーパレット変換することができる、好みのビジュアルからのカラー抽出を可能にした便利なwebサービスとなっています。
詳しくは以下
以前Designdevelopではローディングアニメーションが簡単に生成できるWEBサービスを「99個のサンプルからローディングgifアニメーションが簡単に作れる「Load Info – gif generator」」と言う形で紹介しましたが、今回紹介するのはフリーでつかえるローディングGIFアニメアイコンをまとめて配布しているエントリー「120+ Free Ajax Activity Indicator Gif Icons」です。
シンプルな物から、極小の物まで様々なローディングアニメーションが公開されています。アニメアイコンはGIFアニメで貼り付けられていますので、動きを確認しながらダウンロードすることができるようになっています。
詳しくは以下
webデザインを手がける際に必要となる要素の一つ「カラーリング」。メインとなる背景部分などは、デザインの雰囲気を左右する重要な部分でもあるため、色選びには特に慎重になるのではないでしょうか。そんな中今回は、パープルを使用したwebデザイン事例「Examples of Purple in Web Design」を紹介したいと思います。
（tapmates）
落ち着いた・大人っぽい印象のパープルを上手く使い、洗練されたwebサイトを創り上げています。中でも特に気になった事例をピックアップしましたので、以下よりご覧ください。
詳しくは以下
