デザインを開発するという視点でお伝えするクリエイティブBLOG
ブランドのイメージを強めるショップバック。店舗を構える業種でのブランディングでは要となる外せない要素です。今回はそんな店舗ブランディングの提案を支える強い味方、ショップバックのモックアップをまとめた「20 Free Beautiful Shopping Bag Mockups to Download」をご紹介します。
Shopping Bags PSD Template – GraphicsFuel
さまざまなデザインバリエーションで、ショップバックのモックアップが20種類集められています。その中でも気になった素材を下記にて紹介していますのでご覧下さい。
詳しくは以下
皆様、新年あけましておめでとうございます。
2016年もDesigndevelopを応援・閲覧して頂き、本当にありがとうございます。最近は更新頻度が滞っており、質ではなく量での優位性をもって、デザインや開発を行っている方に貢献するというブログの軸が少しズレてしまっていました。
開設当初は最低でも毎日2件、多い日はもっと数多くの記事をお届けしていましたが、最近では1週間でも2〜3本になってしまっていました。新年ということで改めて当初のコンセプトを再度認識し進んでいきたいと思います。
記事の編集・発信については今までと変わらず、Designdevelopという名前の通り、主にフロントエンドの開発周りから、デザインの際に役立つツールなど利用するものを中心に、今年は記事更新をなるべく行えるように仕組み化し、もっと多様性のある情報、多くのデザインや開発に役立つ情報を皆様にお届けできればと考えています。
2017年、今年もDesigndevelopをどうぞよろしくお願い申し上げます。
フリーで配布されているフォントには実に多彩な種類が存在しており、制作しているデザインにあわせて、選ばれていることと思います。そんな中今回紹介するのは、チョークで書いたような雰囲気を再現できるフォントまとめ「25 Free Chalk Fonts to Enliven your Designs」です。
（Varsity Playbook font by KC Fonts – FontSpace）
かすれたようなアナログな質感を、フォントで簡単に演出することができます。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
クオリティの高いデザイン制作のために、細かいパーツを一つ一つ制作したり、パーツの加工をPhotoshopで行うことも多いと思いますが、一手間も二手間もかかり、制作時間も増えてしまいます。そんなシーンに是非活用したい、Illustratorの表現の幅が広がるIllustratorブラシセットをまとめた「75+ Illustrator Brush Sets for Download」を紹介したいと思います。
（illustrator brush set 3 by ~nrmb on deviantART）
さまざまな罫線を制作できるブラシや、繊細なモチーフやパーツを表現できるブラシが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
高い透明感や透き通った雰囲気が魅力的な水彩。デザインでも人気の高いモチーフですが、アナログで表現しようと思うと思いの他大変なものです。そんな時に参考にしたい、水彩表現をデジタルで可能にしてくれる水彩ブラシセットまとめ「25 Free Watercolor Brush Sets for Skilled Digital Artists」を今回は紹介します。
watercolor brushes – 1 by jmb1 on DeviantArt
アーティスト向けのハイクオリティで使いやすいブラシセットが、25種類紹介されています。更にその中から、おすすめのブラシを幾つかピックアップしてみましたので是非ご覧ください。
詳しくは以下
さまざまな種類がフリーでダウンロードできるようになっているアイコン。種類も豊富で、いろんなデザインに使用できるとあって、重宝する素材の一つではないでしょうか？そんな中今回紹介するのは、シンプルテイストのデザインにぴったりなアウトラインアイコンセット「260+ Free Outline Icons For Designers」です。
アウトラインタイプのアイコンが260種揃った、便利に利用できるアイコンセットとなっています。
詳しくは以下
フィルム独特の味わい深い色の歪み、塵による巧妙な光加減は、写真にレトロな雰囲気とノスタルジー感を与えてくれます。そんな画像加工を手軽に手に入れることができる素材「25 Film Dust Textures」を今回は紹介したいと思います。
独特なグラデーションの色合いが味わい深い、２５種類のテクスチャ素材がまとめられてます。
詳しくは以下
(さらに…)
ハイクオリティなWEBページを簡単に構築できるWordPressを利用し、ポートフォリオサイトを公開されているそこで今回紹介するのが、ポートフォリオサイトに利用しやすいWordPressテーマをまとめた「35+ Free and Premium WordPress Portfolio Themes」です。
画像領域の演出が多彩なテーマが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
開発する上で重要なのが各種要素の動きや挙動、見た目だけではなくて、動きもクオリティに大きく関わってきます。今日紹介するのは各要素ごとのデザインサンプル・HTML・CSS・JSのコードまで参照することができるデザイン集「CodePen Design Patterns」です。
アコーディオン・メニューアイコン、タブ、ドロップメニュー、ローディングといった、WEBサイトのインターフェイスを構成する上で重要な要素ごとにまとめられています。
詳しくは以下
特殊な領域のアイコンセットは、特定の分野のデザインにはとても便利で上手く使えばサイトの世界観・クオリティを引き上げてくれます。今回紹介するのは冷蔵庫、電子レンジ、鍋つかみなど、キッチン用品を集めたフリーベクターアイコンセット「Kitchen Tools & Appliances Icons 」です。
全部で20個のキッチンで利用する家電やツールが収録されています。
詳しくは以下
乗り物の代名詞的な車。全世界の多くの人が利用しており、交通の要と言っても良い存在ですが、今日紹介するのはphotoshopで利用できる乗り物ブラシを「170 transportation-themed Photoshop brushes」です。
リアルなモチーフからピクトグラムのような物、軍用車などなど様々な車のphotoshopブラシが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しく以下
Harley Davidson Brushes (20 brushes)
ハレーダビッドソンのエンジンからロゴまで様々なものをフォトショップブラシ。
Cars Brushes
シンプルな車のシルエットのフォトショップブラシ。
Transport Car Brushes
レトロな車体をラフスケッチのフォトショップブラシ。
上記の他にも様々なブラシが公開されています。デザインのテイストによって使える、使えないもでてくるものですが、想像していたイメージにハマれば、使えるphotoshopブラシだと思います。
ブログを運営していたり、WEBを運営したりしているとYouTubeの貼付けタグにお世話になる機会も多いかと思います。WordPressやMovabletypeを始めとする多くのブログツールは「XHTML 1.0」が利用されていますが、実はYouTubeの貼付けタグは「XHTML 1.0」準拠していないそうでW3Cを気にされている方にとっては以前からちょっと話題になっていました。
現状のYouTube貼付タグで「XHTML 1.0」に準拠していない所は以下の通り
* `&rel` は不明な実体参照です。
* 空要素タグは <param /> と書くようにしましょう
* <embed> は Mozilla、MSIE または doti 用のタグです。
* </embed> は Mozilla または MSIE 用のタグです。
* <object> には等価な内容を書くようにしましょう。
手動でも修正できますが、YouTubeを利用するたびに書き直すのは非常に面倒。そこで今回紹介するのはその貼付けタグを自動的に最適化し、XHTML validの状態にしてくれるGreasemonkeyスクリプト「YouTube better embed」です。
変換等の面倒な作業は必要なくインストールするだけで、自動的に変換してくれるのでとても便利です。「XHTML 1.0」準拠にこだわってブログを書いている方はとても便利なスクリプトだと思います。
※このツールを使用するにはfirefoxにGreasemonkeyがインストールされている必要があります。
