様々なイラストレーターのテクニックや素材を紹介する「イラレラボ」
Designdevelopではデザインに役立つTipsを公開してきましたが、今回紹介する「イラレラボ illustrator-labo」はイラストレーターに特化してTipsや素材などを紹介配布されているサイトです。 前回紹介した「日本の伝統色をデザインに！グラフィックスタイルライブラリ「Japanese Traditional 24」」もそのイラレラボさんが配布されている素材の一つです。様々なTipsや素材が公開されていますが、今日はその中から気になるエントリーを紹介したいと思います。 詳しくは以下 ■Tutorial_テクスチャ感のあるタブ型ナビゲーションバーを描く 「カーボンファイバー風味＋金属のテクスチャ感のある」な立体的なナビゲーションバーを制作するチュートリアル。 ■Freebies_木の床3色 フローリング風の木目のグラフィックスタイル ライブラリ。 ■Freebies_ピクセ
CSSを条件分岐させ、環境によって切り替える「Conditional-CSS」
通常CSSはプログラミングのようなifのように条件付けなどはできませんが、今回紹介する「Conditional-CSS」はCSSで条件分岐を実現する画期的なものです。 ブラウザや環境が多様化しているなかでは非常に便利な仕組みだと思います。ブラウザ毎に条件を個別に設定する事もできますし、あらかじめ定義しておけば、cssA、cssXなど複数条件をまとめておく事もできます。 詳しくは以下 Conditional-CSSの「デモ」はこちらからどうぞ、IE、firefox,opera,safariでそれぞれ表示が異なります。コード自体は簡単で公式サイトを見ればすぐにわかるかと思いますが、実装にはサーバー側でプログラムを走らさないといけません。プログラムのダウンロードは「Conditional-CSS | Download」からどうぞ。 かなり便利なものでコチラを使えば、様々な環境で表示を最適化する事
個性的な背景素材をダウンロードできる「Shizoo – einfach mal Design haben」
Designdevelopでは「ディテールまでこだわって背景画像が作れるジェネレーター「Tiled backgrounds designer」/a>」や「商用可！パターン背景素材集「DINPATTERN」」など背景素材がダウンロードできるサイトをいくつか紹介してきましたが、今日紹介するのは個性的な背景素材を配布しているWEBサイト「Shizoo – einfach mal Design haben」です。 シンプルでキレイ目な背景画像も用意されていますが、どちらかと言うと、カラフルなストライプやイラストレーション、柄物などなど少し個性的な背景素材を手に入れる事ができます。全部で25種類の背景画像が収録されている内容の一部を下記に貼付けておきます。 詳しくは以下 ダウンロードはサムネイル右下の数字の横のボーダー画像から。ちなみに画像の横の数字はダウンロード数に鳴っているみたいですので、ファイ
実用的なCSSテーブルデザイン集「Top 10 CSS Table Designs」
TOP > vector , WebService > 実用的なCSSテーブルデザイン集「Top 10 CSS Table Designs」 テーブルと言えば、今やあまり使われなくなった感じがしますが、それでも何かを比較したり、情報を整理したりといった用途には非常に便利に使えます。今日紹介する「Top 10 CSS Table Designs」はCSSでデザインされた、使いやすいシンプルなテーブルサンプルが多数収録されているエントリーです。 いくつか公開されていますが、その中から気になったテーブルデザインをピックアップして紹介したいと思います。 詳しくは以下 ■Horizontal Minimalist シンプルながら実用的なテーブルを使った表組み。項目がしっかりと見えて分かりやすいですね。 ■Box デーブルのボックス単位でハイライトします。行単位で比較したいデータなんかには便利
企業ロゴフォントからユニークな記号フォントまで配布する「smeltery」
今までフォントをダウンロードできるサイトやまとめたエントリーをいくつか紹介してきましたが、今日紹介するのは企業フォントから、ユニークな記号、POPなアルファベットと多種多様なフォントを配布するサイト「SMeltery」です。 いくつか公開されていますが、今日はその中からいくつか気になったフォントを紹介したいと思います。 詳しくは以下 ■SMeltery – COnsume More 企業のロゴがフォントになっています。ホンダやスズキなど日本の企業も少しですが収録されています。 ■SMeltery – WAtch TV ものすごくカクカクしたフォント。タイポグラフィ的に使えそうです。 ■SMeltery – AUdimat シャープで洗練された感じの綺麗なゴシック体様々な場所で使えそうです。 上記の他にもいくつか公開されていて、フリーで利用できるフォントは「Free」にまとめられています。そ
ロゴデザインのインスピレーションを得るための「54 Creative Logos Hand-picked From Logopond」
企業や団体を示すロゴマーク。どんなロゴにも様々なの想いが込められていると思います。ロゴのデザインは非常に難しく、企業や団体のコンセプトを折込ながらも事業性を示し、なおかつ会社のステータス性やおかれている立場も意識しないといけません。 今日紹介するのはそんな難しいロゴデザインの際に役立つ、海外のクリエイティブなロゴを54個集めた「54 Creative Logos Hand-picked From Logopond」と言うエントリーです。このエントリーでは「LogoPond」というロゴデータベースから特にクリエイティブなものを集めたエントリーです。今回はその中でも特に気になった物をピックアップして紹介したいと思います。 詳しくは以下 最近はグラフィカルなロゴも多いので、グラフィックデザインの参考にもなりそうです。ロゴをデザインする上では良い茂木になるかと思います。今一インスピレーションが…と
光を表現する煌めくphotoshopブラシ200選「200+ Photoshop Brushes for Light, Sparkles, Glows and Glitter」
光を表現する煌めくphotoshopブラシ200選「200+ Photoshop Brushes for Light, Sparkles, Glows and Glitter」 光、照明というのはかなり見た目の印象に影響を及ぼします。今日紹介するのはそんな光を表現するphotoshopのブラシを200個以上紹介しているエントリー「200+ Photoshop Brushes for Light, Sparkles, Glows and Glitter」です。 煌めく星のようなブラシからぼんやりと光る光の線や雷や宇宙っぽいものまで様々なです。今日は紹介されているブラシの中からいくつ書きになるブラシをピックアップして紹介したいと思います。 詳しくは以下 ■Glow Brushes ぼんやりと輝く光を作り出せるブラシセットです。グラフィカルな表現に向いています。 ■Glitter and Spa
質の高いアイコンとグラフィックのフリー素材を配布する「DryIcons」
WEB制作で欠かせない存在のアイコン。今日紹介する「DryIcons.com – Free Icons and Graphics」はクオリティの高い、アイコン素材とグラフィック素材を無料で公開、配布しているWEBサイトです。 アイコンは種類が豊富で、テイストも様々ですが、どちらかと言えば3Dっぽい作り込んであるタイプのアイコンが多い気がします。アイコンはセットになって配布しているので、新規サイト立ち上げなんかのと記には非常に使い勝手が良さそうです。まず公開されているアイコンの中からいくつか気になるセットを紹介したいと思います。 詳しくは以下 ■Icon Set – 50 High Quality Web Icons ■300 High Quality Web Icons ■52 High Quality Web Icons なおフリーグラフィック素材はFlickrにてセットでダウンロードで
グラフィカルな表現には欠かせない30のグランジフォント「30 New (Free) Grunge Fonts」
グラフィックに質感を持たすために、一つの選択肢として使えるのが、グランジフォント。汚れたような、味のある風合いが、デザインに深みを与えてくれたりします。今日紹介する「30 New (Free) Grunge Fonts」はそんなグランジフォントを30個まとめたエントリーです。 いくつか紹介されていますが、今日はその中から特に気になった物をいくつかピックアップして紹介したいと思います。 詳しくは以下 ■Heroin 07–Download Website ■Inked God–Download Website ■Core–Download Website ■Elli Noise –Download Website クールなフォントから、アナログ感溢れるフォント、かわいらしいフォントなど様々なグランジフォントが公開されています。上記以外にも公開されていますので、気になった方は原文をご覧ください
シンプルなフォームデザインテクニック集「Enhance your input fields with simple CSS tricks 」
ちょっとした所に気を使うか、使わないかで、全体のデザインのクオリティは大きく変わると思います。今日紹介するのはユーザーと管理者側を結ぶフォームをよりキレイに見せるためのCSSデザインのTips集「Enhance your input fields with simple CSS tricks 」です。 シンプルなフォームを作っていく過程を紹介しながら、デザインテクニックを段階的に紹介しています。実際のCSSのコードを交えながら解説していますので、わかりやすいかと思います。 詳しくは以下 すべてデザインを終えた後のサンプルデモが公開されていますので、「example page」をご覧ください。部分的に取り入れるも良し、丸ごと取り入れても良しなにかしら役に立ちそうです。 またシンプルなデザインだけに、カスタマイズなども簡単にでき、加えるアイデア次第で、クリエイティブなフォームを作れそうな気がし
ハイクオリティなフリーphotoshopブラシ配布サイト「Qbrushes」
今までphotoshopのブラシを配布するサイトはDesigndevelopと紹介してきましたが、今日紹介するのはハイクオリティなフリーphotoshopブラシを多数配布する「Qbrushes」です。 サイトは非常にシンプルで、配布されているphotoshopブラシで作られたグラフィック並んでいて、どういったブラシでどんな事ができるのかというのを感覚的に理解することができます。配布されているブラシの例をいくつか下記に貼り付けておきます。 詳しくは以下 全体的には現在のグラフィックの流れに沿いながらも、ハイクオリティのブラシが集められているような気がします。ただ並んでいるだけではなく、レーティングや投票機能なども備えています。またブラシはジャンル別にカテゴライズされており、雰囲気やテイストからも探し出すことが可能です。 尚、こちらのベクターデータ版もあり、そちらは以前「無料配布のベクター素材
デザインも秀逸なナビゲーションを実装するスタイルシートとスクリプトのチュートリアル集
デザインも秀逸なナビゲーションを実装するスタイルシートとスクリプトのチュートリアルの紹介です。 各サイトではチュートリアルの他、ファイル一式や画像データをダウンロードできるものもあります。
インパクトのあるポスター画像を作るPhotoshopチュートリアル集:phpspot開発日誌
35 Photoshop Tutorials for Designing Your Own Posters | Vandelay Website Design Creating posters with Photoshop can be a lot of fun and there are unlimited opportunities. インパクトのあるポスター画像を作るPhotoshopチュートリアル集。 次のようなプロっぽいポスター画像を作るチュートリアルがいろいろ。 Creating an Old Collage Effect Poster Gig Poster Design Stencil Poster Effects Create a 60’s Psychedelic Style Concert Poster B Movie Post Art Photoshop Indiana
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA