デザインを開発するという視点でお伝えするクリエイティブBLOG
ベクターデータとは線の起終点の座標（位置）、曲線であればその曲がり方、太さ、色、それら線に囲まれた面の色、それらの変化のしかたなどを、数値で表すことにより、コンピュータで扱うデータとしたもので、数値なので、引き延ばしたり、変化を加えてもそれに合わせて劣化無く変形できるのが特徴です。
デザインする上で自由が効くため基本ベクターデータでデザインするのは当たり前ですが、仕事によっては素材のベクターデータが無く、JPGやGIF等できたりします。画像で来るととても不便で、ペンツールで下記起こしたりしていましたが、IllustratorCS2以降ライブトレースと言う画像をベクターデータ化してくれる機能が付きました。今回はそのライブトレースをオンラインで可能にしてくれるサービス「VectorMagic」を紹介したいと思います。
こちらのサービスを使えばオンラインで画像から簡単にベクターデータを作成する事が可能です。
詳しくは以下
完全に覚えていないとなかなかCSSのコードからその処理を頭に思い描くのは難しいかと思います。今日紹介するのはCSSの動きを簡単に確認できるサービス「CSS Sandbox」を紹介したいと思います。こちらを使えば瞬時に動作確認が行なえます。
使い方は非常に簡単で画面の下のコードをクリックするだけで上のプレビュー欄に反映され、確認する事が出来ます。
選択されたCSSは上記のように赤く反転しますので今どんなCSSが使われているのかが直感的に分かるようになっています。かなりの数のCSSが登録されていますのでCSSを覚えたての方は色々な発見が出来きるかと思います。
CSSの処理を学ぶだけではなく、ブラウザ上で動作しますのでCSSでのブラウザごとの表示など様々な用途で使えそうです。動的に動いているのでサクサクチェックできるのもポイントです。
プライベート、仕事に関わらず圧縮ファイルに接する回数はものすごい多いかと思います。ファイルのやり取りにはもはや欠かせなくなってきています。圧縮ファイルにも様々な物が存在していてソフトも多岐に渡ります。自宅のPCや職場のPCならある程度環境が整っている方が多いかと思いますが、出先ともなるとそうはいきません。
わざわざ圧縮解凍のソフトをインストールして使わなければ行けない自体もたまにではありますがあります。そんな面倒な自体を回避する為のWEBサービスが今回紹介する「Wobzip」です。
こちらのWEBサービスはオンライン上で簡単に圧縮解凍ができ、解凍したファイルはダウンロードしてローカルに移すという方法をとっています。対応している圧縮ファイルは7z, ZIP, Z, CPIO, RPM, DEB, LZH, SPLIT, CHM, ISOとかなり豊富です。ちなみに容量制限は100MBとなっています。
via コリス
シームレスに継ぎ目なく使用できるテクスチャは、非常に便利で重宝する素材。今回はそんなシームレスに利用できるアスファルトテクスチャ「Most Useful Collection Of Free Seamless Asphalt Textures」を紹介したいと思います。
[GH Free Texture Library]: (ASPHALT 1) seamless tarmac road tar texture
いろいろなデザインに活用できそうなアスファルトをテーマにしたテクスチャがまとめられています。
詳しくは以下
見やすく、分かりやすいインターフェイスを構築するためには、デザイン性にもこだわりが必要なもの。今回はそんな時に便利に活用できるフリーUIキット「11 Useful And Free CSS UI Kits」を紹介したいと思います。
（Dribbble – All CSS UI-kits by Samuel Horn af Rantzien）
シンプルベースのボタンやバーなどを収録したUIキットが11種まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
線画や面だけで表現されるアイコンは、利用するだけで簡単に機能や意味が表現できるとても便利な存在。より多くの種類をストックしておけば、デザインの幅が広がります。今回はコレクションに是非加えたい、最新のアイコンセットまとめ「33 New and Free Icon Sets」を紹介したいと思います。
Dribbble – Free Icons by Fabrizio del Gaudio
フラットタイプから、リアルな表現を施したものまで、さまざまなテイストのアイコンがまとめられています。
詳しくは以下
WEBの素材の定番中の定番のテクスチャ。世の中には様々なテクスチャ素材が公開されていますが、自分で作ってみようかなと思った時に便利なのが今回紹介するハイクオリティなテクスチャを作るためのチュートリアル「Ultimate Guide for Creating High Quality Textures」。
いくつかのカメラ、ソフトウェア、シャープ、ライティングなどなどテクスチャを制作する上でのいくつかのキーポイントにわけてそれぞれ詳しく解説されています。今回はその中から一つだけ紹介したいと思います。
詳しくは以下
ユーザービリティの向上のための仕掛の一つツールチップ、最近の主流としてはjavascroptを使用しての実装という形が多く、色々な形でパッケージ化されています。ある程度パッケージングされているんで実装は簡単とは言え、なれていない人にとってはまだまだややこしい部分も多いです。
今回紹介する「Easy CSS Tooltip」はjavascriptを使用せずCSSとHTMLでツールチップを実現すると言うものです。
詳しくは以下
イラストレーターなどのデザインソフトを使うことで、さまざまなグラフィック表現が可能となりますが、頭で思い描いているデザインをどうやったら作り出せるかわからない時もあるのではないでしょうか？今回はそんなシーンで参考にしたい、最新のベクターグラフィックチュートリアル「New Vector Graphics Tutorials」を紹介したいと思います。
Create a Highlighter Text Effect Vector in Adobe Illustrator – Vectips
イラストレーターでの制作チュートリアルを中心に、いろんな種類のグラフィック制作方法が紹介されています。
詳しくは以下
様々な表現を簡単にしてくれるphotoshopブラシ。様々なphotoshopブラシが公開されていますが、今回紹介するのは割れたガラスを表現するphotoshopブラシ「High-Res Photoshop Brushes for Creating Broken Glass Effect」です。
上記の通り、14個のひび割れたガラスのブラシがセットになっています。割れ方もそれぞれで、弾痕みたいなものから、派手に割られたものまで、様々なものが公開されています。
詳しくは以下
モックアップやテンプレートは、完成度の高いクオリティの高いものが数多く配布されており、常にチェックされている方も多いのではないでしょうか？そんな中今回は、ぜひダウンロードしておきたい、モックアップ&テンプレート集「12 Fresh PSD Mockup Templates For Creative Works」を紹介したいと思います。
Branding / Identity MockUp Vol.15 | GraphicBurger
webや紙媒体などで使用できるテンプレートが12種、ピックアップされ紹介されています。
詳しくは以下
質感を出すのにとても便利なテクスチャ。素材感を出すだけで、上手く使えばグッとデザインの質を上げてくれる便利な素材です。今日紹介するのはテクスチャの中でも使いやすいシンプルな紙のテクスチャを集めたエントリー「40+ Various High Quality Free Paper Patterns and Textures」。
しわくちゃの紙から、方眼、ダンボール、楽譜などスタンダードなものから少し変わったものまで様々なテクスチャが公開されています、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
以前「フリーフォント配布サイトのまとめ「Top 28 Free Font Directory Resource Sites」」という記事でも少し触れた8200ものフォントが収録されているフリーフォントポータルサイト「DaFont.com」今日はその中からグラフィティっぽいフォントだけを厳選して集めたエントリー「12 Fantastically Free Graffiti Fonts」を紹介したいと思います。
手書きのようなアナログ感とストリートアートを彷彿とさせるような勢いがあるフォントです。全部で12個のグラフィティフォントが紹介されていますが、今日は気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
