写真を加工するなど、美しいグラフィック制作に欠かせないデザインソフトphotoshop。たくさんの機能や効果がついており、プラグインなどもあるため非常に奥の深いソフトです。今回ご紹介するのは、そんなphotoshopを使ったフォトレタッチなどのチュートリアルまとめ「Photoshop Tutorials – 35 New Tutorials to Learn Advance Techniques Of Photo Manipulation」です。
photoshopの技術を格段にレベルアップしてくれる、ハイレベルなphotoshopチュートリアルが多数紹介されています。その中から幾つかおすすめのチュートリアルをピックアップしてまとめましたので、ぜひご覧ください。
詳しくは以下
(さらに…)
webサイトを立ち上げる際に必要な素材の一つ、ファビコン。時には設置を忘れてしまいがちですが、サイト自体の完成度を高めるためにはとても重要な要素だと思います。今回はそんなファビコン用データを簡単に作成できる「Favicon Maker」を紹介します。
![]()
サイト内にドラック&ドロップするだけで、さまざまなサイズのファビコン用データを一気に生成してくれるとても便利なwebツールとなっています。
詳しくは以下
Photoshopは奥が深く、極めればたいていのものは描けるぐらい、高度なソフトウェアで写真補正以外にも大きな力を発揮してくれます。今日紹介するのは、photoshopで光を表現したい人のためのチュートリアルをまとめたエントリー「10 Advanced Photoshop Tutorials for Lighting Effects」です。
光といっても、その表現も様々です。今日は紹介されているチュートリアルの中から特に気になったものをピックアップして紹介したいと思います。
詳しくは以下
写真にミステリアスな雰囲気をプラスしたり、食品を美味しそうに見せたり、何かと利用する機会の多い霧や湯気の効果。写真の雰囲気を一気に高めてくれますが、一から作るのは少々手間。そんな中今回ご紹介するのは、そんなときに利用したい霧や煙が立ち込めるようなテクスチャー素材「20 Mysterious Fog Overlays」です。

20 Mysterious Fog Overlays — download free effects by Pixelbuddha
霧や煙などの白い靄を簡単に表現してくれる、ハイクオリティな素材が集められた素材セットです。
詳しくは以下
(さらに…)
今やスマートフォンアプリにおいて欠かせないアイコンのひとつである、ジェスチャーアイコン。新規ユーザーに使い方を伝えていく上で重要なファクターになっています。今回ご紹介するのはジェスチャーアイコンが15個もまとめられた「15 Free Gesture and Interaction Icon Sets for Mobile App Designers」になります。
![]()
100+ Touch Gestures Icons — download free icons by PixelBuddha
このまとめではひとつのアイコンセットに最大100種類収録されているものもあります。いくつか気になったものをピックアップしましたので、以下からご覧ください。
詳しくは以下
完全に覚えていないとなかなかCSSのコードからその処理を頭に思い描くのは難しいかと思います。今日紹介するのはCSSの動きを簡単に確認できるサービス「CSS Sandbox」を紹介したいと思います。こちらを使えば瞬時に動作確認が行なえます。

使い方は非常に簡単で画面の下のコードをクリックするだけで上のプレビュー欄に反映され、確認する事が出来ます。
選択されたCSSは上記のように赤く反転しますので今どんなCSSが使われているのかが直感的に分かるようになっています。かなりの数のCSSが登録されていますのでCSSを覚えたての方は色々な発見が出来きるかと思います。

CSSの処理を学ぶだけではなく、ブラウザ上で動作しますのでCSSでのブラウザごとの表示など様々な用途で使えそうです。動的に動いているのでサクサクチェックできるのもポイントです。
プレゼントなどのラッピングに欠かせないリボンは、相手にスペシャル感を与えられる代表的なアイテム。webデザインの世界でも人気のあしらいとして、広く活用されています。今回は、そんなリボンを表現できるPSD素材をまとめた「30 Beautiful Ribbons PSD Files for Free Download」を紹介したいと思います。

Leather Ribbons & Web Elements | MediaLoot
ボタンやワンポイントなど、webサイトデザインで利用できるPSD素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
現実にはないことを強いインパクトで表現するモーショングラフィック、グラフィックデザインを活かしたCM制作など、映像表現になくてはならないものとなっています。パソコン性能の向上とともにモーショングラフィック技術も日々進化し続けており、表現力の豊かさに魅了される方も多いのではないでしょうか?そこで今回紹介するのは、空間を上手く利用したスタイリッシュなモーショングラフィックまとめ「17 Motion Graphic Animations sure to Inspire」です。
表現力の高いモーショングラフィックが多数集められており、企画の参考にもなりそうなまとめとなっています。
詳しくは以下
今まで「システムアイコンからアプリアイコンまで170のアイコンを収録したアイコンセット「170 dock icons」」や「可愛らしいフリーアイコンセット集「26 Free Icon Sets We Love」」などと様々なアイコンセットを紹介してきましたが、今日紹介する「DelliPack 1.0&2.0」は立体感があり、クオリティの高いフリーアイコンセットです。
![]()
パレット、金庫、建物、黒板からなどの少し特徴的な物から、人物、更新アイコンなど標準的なものまで、バリエーション豊かなアイコンが収録されています。
詳しくは以下
![]()
DelliPack 1.0
![]()
DelliPack 2.0
二つのファイルともにzipファイルで配布されていて、ファイル形式はPNGでサイズは256, 128, 64, 48, 32 and 16 pixelsの6種類が用意されています。またDelliPack 1.0の方は「Smashing Magazine」でPSDファイルも公開されていますのでアイコン制作の勉強用にも良さそうです。
自由にダウンロードでき、アイコンは再配布、販売を除いて、商用、非商用問わずどんな規制も受ける事無く、自由に利用する事が出来ます。
WEBに掲載する以上、画像をローカルに保存されると言う事は仕方が無い事だと言う認識が主流だとは思いますが、それは避けたい、あまり保存されたくないと思っている方にオススメなのが、今回紹介するJavaScript「dwProtector」です。
dwProtectorは「右クリックによる名前をつけて保存」「ドラッグ&ドロップで保存」「右クリックで名前をつけて背景を保存」「背景画像を表示」からの画像保存をプロテクトしてくれます。
詳しくは以下