デザインを開発するという視点でお伝えするクリエイティブBLOG
深い深海の風景はとても神聖なもののように感じられますが、実際にデザインで自作で表現しようと思うと、高い技術が要求されるもの。今回はそんな時に参考にしたい、深い海の中のビジュアルを作成するためのチュートリアル集「A Set Of Helpful Underwater Photoshop Tutorials」を紹介したいと思います。
Simple Underwater Scene in Photoshop | Abduzeedo Design Inspiration
水々しい質感と、深い海の底のイメージをリアルに表現できるPhotoshopチュートリアルが公開されています。
詳しくは以下
背景素材として活躍してくれるパターン。すでに完成されているものはもちろん便利ですが、時には自分で作ったものを使用したい時もあるのではないでしょうか？今回はそんな時に参考にしたい、パターンチュートリアル11種「11 Pattern Tutorials For Your Next Designs」を紹介したいと思います。
11種類のパターンを作成できる手法が、分かりやすく紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
テキストをただ平打したり並べて配置するだけでなく、グラフィカルな加工を施すことでよりデザインが魅力的に見えてくることも。そんな中今回紹介するのは、さまざまなテイストのテキストチュートリアルをまとめた「New Text Effects Tutorials 2015」です。
Create 3D Star Light Text Effect in Photoshop – PSD Vault
テキストを、リアルかつデザイン的に表現できるチュートリアルが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Photoshopを使えばリアルな表現の加工が可能となり、クリエイティブの幅も格段に広がってきます。そんな中今回紹介するのは、食べ物をモチーフにしたPhotoshopチュートリアまとめ「The Ultimate Roundup Of 38 Delicious Photoshop Food Tutorials」です。
Create a Sweet Chocolate-Coated Text Effect
いろいろな食べ物をテーマとした加工のチュートリアルが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
背景に利用することでデザインをより魅力的に見せてくれる効果を発揮するパターン素材。すでに用意されているものを使用するのも良いのですが、時には自身で作成したものでデザインを完成させたい時もあるのではないでしょうか？今回はそんな時に参考にしたい背景パターンチュートリアル集「Pattern Tutorials: 25 Background Pattern Design Tutorials & Free Patterns」を紹介したいと思います。
Create a Wallpaper with Vector Geometric Blurred Shapes in Illustrator and Photoshop
豊富なバリエーションを揃えたチュートリアル集で、ソフトのいろいろな技術等も参考にすることができそうです。
詳しくは以下
デザイン素材の中でも、比較的使用頻度の高いパターン素材。既存のものを手軽に使用するのも良いですが、時にはオリジナル性を高めるために自身で作りたいというシーンもあるのではないでしょうか？今回はそんな時に参考にしたい、Photoshopで作り出すパターンチュートリアルまとめ「A Compilation Of Pattern Tutorials For Photoshop」を紹介したいと思います。
いろいろなデザインのパターンの作り方を、分かりやすく紹介したチュートリアルがまとめられています。
詳しくは以下
デスクトップからインターフェイス、WEBデザインまで様々な用途で使えるアイコン。そんなアイコンをまとめたエントリーが今回紹介する「40+ Extremely Beautiful Icon Sets Hand-picked from deviantART」です。このサイトはあらゆるジャンルのクリエイター達のコミュニティ「deviantART」からピックアップしてきたものだそうです。
管理者さんが直接ピックアップしているみたいなので、好みがでていて立体的なアイコンが多いです。今日はその中から気になったアイコンをいくつか紹介したいと思います。
詳しくは以下
WEB制作に便利なjQuery。プラグインも豊富にリリースされており、世界中でりよすされているjavascriptの一つです。今日紹介するのは最近リリースされたクリエイティブなjQueryプラグイン集「8 Fresh and Useful jQuery Plugins」です。
全部で8つのプラグインが紹介されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
WEBでもグラフィックでもメニューの内容や機能などを端的に表現する時に便利なピクトグラム。シンプルながらもデザインを機能的にブラッシュアップしてくれる効果的なものですが、今日紹介するのはシンプルなピクトグラムをフォントとして使える「Erler Dingbats」です。
こちらはDingbatsフォントの一種で様々なピクトグラムがフォントセットとしてまとめられています。収録されているフォントの種類は以下からご覧ください。
詳しくは以下
様々なブラウザがリリースされており、CSSの解釈は各ブラウザで異なり、多くのWEB制作者が悩まされていますが、そんな問題を回避してくれる対策の一つが、Reset CSS、ブラウザ間の見栄えを少しでも揃えるために、ブラウザ固有のスタイルシートを初期化してくれるものですが、今回紹介するのはそんなReset CSSを集めたサイト「CSS Reset.com」を紹介したいと思います。
サイトからは様々な種類のResetCSSのコードをコピーできたり、それぞれのドキュメントが参照できたりと、ResetCSSを便利に利用出来るようになっています。
詳しくは以下
インターネット上で配布されている素材の中でも、活用の幅の広いフリーフォント。特にシンプルで汎用性の効くタイプは1つでも多く持っておきたいものです。今回そんなタイプのミニマルデザインフォントまとめ「19 Free And Stylish Minimalistic Fonts For Your Designs」を紹介したいと思います。
（Simple Ronde Font | dafont.com）
いろんなデザインに使用できそうなフォントが19種、ビジュアルイメージと共に公開されています。いくつかピックアップしていみましたので、下記よりご覧ください。
詳しくは以下
みなさま、新年あけましておめでとうございます。
2015年もたくさんの方にDesigndevelopを応援して頂き、本当にありがとうございます。非常に多忙な日々を過ごし、例年のごとく年末は非常に慌ただしい日々となりました。
毎年新しい流行やトレンドが生まれ、どんどんと素材やツールも進化していっていることを、情報をお伝えする側として強く感じています。その中で変わらない根強く支持され続けているものも存在していることも事実。新しいものを中心にしつつも、変わらない部分をしっかりと抑えつつ、皆様により良い記事を読んで関心を抱いていただけるよう、2016年も努めて参りたいと思います。また、もっと皆様の興味関心を強める、Desgindevelopの今後の発展も視野に入れた、何か別の新しい目線での記事などもお伝えすることができれば良いなと思っております。
2016年、今年もDesigndevelopをどうぞよろしくお願い申し上げます。
ユーザーインターフェイスの向上だったり、ページ自体の賑やかしなど、様々な用途で使えるアイコン。WEBデザインにおいて非常に便利な素材の一つです。今日紹介するのはWEBデザイナー、開発者のためのフリーアイコンセットをまとめたエントリー「20 New Free Icon Sets for Web Designers and Developers」です。
シンプルなものから、カワイイものまで、様々なデザイン感のアイコンセットが公開されています。
詳しくは以下
通常CSSはプログラミングのようなifのように条件付けなどはできませんが、今回紹介する「Conditional-CSS」はCSSで条件分岐を実現する画期的なものです。
ブラウザや環境が多様化しているなかでは非常に便利な仕組みだと思います。ブラウザ毎に条件を個別に設定する事もできますし、あらかじめ定義しておけば、cssA、cssXなど複数条件をまとめておく事もできます。
詳しくは以下
Conditional-CSSの「デモ」はこちらからどうぞ、IE、firefox,opera,safariでそれぞれ表示が異なります。コード自体は簡単で公式サイトを見ればすぐにわかるかと思いますが、実装にはサーバー側でプログラムを走らさないといけません。プログラムのダウンロードは「Conditional-CSS | Download」からどうぞ。
かなり便利なものでコチラを使えば、様々な環境で表示を最適化する事が出来るかと思いますが、毎回プログラムを読み込む仕組みなので、アクセスが多いサイトでは注意してください。実装の手順として詳しく説明されているサイトをいくつか紹介しておきます。使ってみたいと言う方はそちらを参考にしながら試してみてください。
【参考サイト】
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
CSSの記述に条件文が使えるようになる「Conditional-CSS」:phpspot開発日誌
デザインに欠かすことのできない要素の一つとしてテキストがありますが、ただ平打ちをするだけではどうしても物足りないということもあるのではないでしょうか？そんな中今回は、リアルな質感を表現できる、ハイクオリティなテキストエフェクト「30 High Quality Text Effects Photoshop Files」です。
Psd Wall Poster Text Effect | Photoshop Text Effects | Pixeden
インパクトのあるデザイン性が特徴のテキストエフェクトが30種紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
