デザインを開発するという視点でお伝えするクリエイティブBLOG
リアルなオブジェクトをデザインソフトで作り出そうとするのは、時間や手間もかかり、高いクオリティに仕上げることができる技術も必要になってきます。今回はそんな時是非参考にしたい、イラストレーターで作れるベクターデザインチュートリアルまとめ「40+ Adobe Illustrator Tutorials On Vector Design」を紹介したいと思います。
Create a Crayons Illustration in Adobe Illustrator – Tuts+ Design & Illustration Tutorial
Adobeのソフト・イラストレーターを使ったいろいろなデザインオブジェクトの制作方法が紹介されています。
詳しくは以下
イラストや写真だけでなく、テキストをPhotoshopなどで加工しデザインすることで、制作物のクオリティは格段にアップします。今回はそんなグラフィカルなテキストデザインを実現できるPhotoshopチュートリアル15種「15 Amazing Text Effects Photoshop Tutorials for Designers」を紹介したいと思います。
テキストをベースに、想像もできないようなリアルな表現を可能にするチュートリアルが紹介されています。
詳しくは以下
単純にテキストを打ち込むだけではなく、もっと魅力あふれるグラフィックに仕上げるためには、Photoshopなどを使用して加工を施すと効果的。今回はそんなグラフィカルな表現を可能にするPhoshoshopエフェクトチュートリアルまとめ「25 New and Creative Photoshop Text Effect Tutorials」を紹介したいと思います。
Simple Printable Pennant Banner Design and Text Effect | Textuts
いろいろな表情のテキストエフェクトのフローが分かりやすくまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Photoshopを使えばいろいろなグラフィック表現が可能になりますが、機能が豊富に備わっているためなかなか使いこなせていないという方も多いのでは？今回はそんな時に参考にしたいPhotoshopチュートリアルまとめ「50 Best Photoshop Tutorials 2014」を紹介します。
（Photoshop tutorial: Stylise photos using colourful shapes – Digital Arts）
グラフィカルな加工方法を学ぶことができるチュートリアルが多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
写真をさまざまな表情に加工できるPhotoshopは非常に便利なソフト。プロの現場でほとんどの方が利用したことがあるのではないでしょうか？そんな中今回紹介するのは、グラフィカルな表現を可能にする写真加工チュートリアルまとめ「22 New Photo Manipulation Tutorials for Photoshop」です。
（Photoshop Tutorial: Retouching Photos in Ten Minutes or Less | Tutorials | Graphic Design Junction）
Photoshopを使ってできる、多彩な加工方法を紹介した記事がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
イラストやオブジェクト、写真だけでなく、デザインの中にあるテキストもグラフィカルに表現したい時があるかと思います。しかしどのように加工したら良いのかわからないことも多いのではないでしょうか？そんな時に参考にしたいチュートリアル集「21 Text Effects Tutorials in Photoshop and Illustrator」を今回は紹介したいと思います。
テキストを、リアルな質感のグラフィック要素としてデザインできる方法が分かりやすく紹介されています。
詳しくは以下
フリーでたくさんの素材が配布されており、種類やテーマも豊富なので非常に便利に活躍してくれます。今回はそんなフリー素材を集めた「40 Freebies & Goodies For Web Designers」を紹介したいと思います。
UIやフォント、モックアップなど、いろいろな種類の素材が厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE
オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。
詳しくは以下
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。
最近国内でもよく見かける紙面のような、レイアウトのWEBデザイン。従来のモノと比べて新鮮な印象を受けます。今日紹介するのはそんな雑誌風、新聞風のWEBレイアウトを集めた、インスピレーション集「50 Impressive Magazine and Newspaper Styled Web Designs」です。
R.fm – The Finest Blend of Club Culture
一口にマガジンタイプといっても、様々なレイアウトが公開されています。全部で50ものレイアウトが公開されていますが、今日はその中から気になったものをいくつか消化したいと思います。
詳しくは以下
ショートカットキーを使えば、すぐできること、改善できることというのが沢山あります。しかしなかなか慣れてくるまではどうしてもUIに頼って、ショートカットキーを使わないなんて人も多いかと思います。そこで今回は操作に慣れていない人向けにillustoratorのショットカットキーを覚えるために役立つWEBサイトを紹介したいと思います。
photo by laffy4k
探してみるとものすごい数のチートシートがありますが、今日は使えそうなものをいくつかピックアップして紹介したいと思います。
詳しくは以下
OS移行のためにHDDをまっさらにするかもしれないので、環境も移行する準備をしていかないと行けなくなってしまいました。今回はもっともよく使っているツールの一つ「Firefox」と「Thunderbird」のバックアップについて記していきたいと思います。
基本的には両アプリケーションともに基本的な設定や内容、パスワードや個人設定にいたるまですべてを「プロファイル」に保存しています。なので基本的にはこのプロファイルをバックアップ取ってやれば環境もバックアップできたことになります。
詳しくは以下
非常に便利なツール・アイコン。さまざまな種類が配付されており、いろいろな種類を集めている方も多いのではないでしょうか？そんな中今回紹介するのは、フリーで使用できるpsdアイコンを集めた「Free PSD Icons: 800+ Icons for Designers」です。
定番タイプから、個性的なテーマで展開されたものまで、いろんな種類のアイコンが紹介されています。
詳しくは以下
webサイトにアクセスした時や、重たいデータを読み込みする際に使用するローディング&プログレスバー。シンプルなデザインのものが多いですが、しっかりとデザインされたものが配置されていると、サイトクオリティをより高めることができます。今回はそんな時に参考にしたい、フリーのローディング&プログレスバー13種「13 Free PSD Loading & Progress Bar Designs」を紹介したいと思います。
Dribbble – Round Progress Meter (PSD Freebie) by Marco Moreno
デザイン的に非常に優れ、なおかつフリーで使用できるものが厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webサイト制作にはいろいろな素材を利用しますが、クオリティの高いものを1から作り出そうとすると手間や時間がかかってしまうもの。できれば時間を短縮しつつ、思い通りのデザインに仕上げたいものです。今回はそんなシーンにおすすめのPhotoshop素材を集めた「Useful Collection Of Free Photoshop Files」を紹介したいと思います。
（Transparent Organic Form – 365psd）
いろいろな種類のPhotoshop素材がまとめられており、デザイン箇所に合わせて使い分けられるようになっています。
詳しくは以下
WEB制作者の話題では最近耳にする機会も多いCSS3。多くのWEB制作に携わる人にとっては無視できない存在だと思います。もうすでに利用されているという方もいるかと思います。今日紹介するのはCSS3を便利に使うためのCSS3用のオンラインツールをまとめたエントリー「10 Useful CSS3 Tools for Your Next Web Development」。
コードを参照するものから、ジェネレータ系まで様々なオンラインツールがまとめられています。今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
Webデザインやコーディングの経験を積んでくると、「ユーザーにやさしいWebサイト」といったことを意識するようになると思いますが、今回はそんなユーザーフレンドリーなサイトにするためのjQueryプラグインをまとめた「40 Fresh jQuery Plugins To Make Your Website User Friendly」を紹介したいと思います。
Jquery Alpha Image by Ilker Guller
基本的な機能からフレキシブルデザインに対応したもの、検索候補を出すプラグインなど、かゆい所に手の届くプラグインが揃っています。中でも気になったものをピックアップしたので下記よりご覧ください。
詳しくは以下
