DesignWalker » Photoshop関連

動画のチュートリアルは、英語がわからない…。と敬遠している方も多いかもしれませんが、なるべくわかりやすく説明してくれているものをピックアップしました。英語の勉強をしている方でデザインにも興味ある方には一石二鳥！？ですね。もし、Photoshopを普段から使っている人などは、いきなり字幕無しの映画を見たり、ニュースを聞いたりするよりも、かなり英語がすんなり耳に入ってくると思いますよ。

Photoshop Background Eraser

『背景消しゴム』ツールの使い方を動画で説明してくれています。とってもわかりやすく説明してくれています。中心のプラスマークが切り抜きたい対象にかからないようにすることがポイント。

ExtractSM

こちらはいきなり難易度があがってしまいましたが…。英語はとってもゆっくり話してくれているので、わかりやすいと思います。パスとチャンネルを利用してきれいに背景を切り抜く方法を説明してくれています。

抽出ツール

Removing a Picture from it’s Background using extract in Photoshop

こちらは比較的簡単な『抽出ツール』を使って背景を切り抜く方法です。

チャンネル

Adobe Photoshop CS3 Tutorials – Extract Complex Shapes

こちらは『チャンネル』を利用して背景をきれいに切り抜く方法です。

Removing the Background – Photoshop Channel Mask

こちらも『チャンネル』を利用してきれいに花火を切り抜く方法です。上のやり方と同様にチャンネルを使う方法は背景とのコントラストが高い場合にこの方法が有効ですね。

Masking a Tree

こちらも同様に複雑な木の葉を切り抜く方法が紹介されています。

パス

Using the Pen Tool to Extract or Make Selection

パスを使って切り抜く方法が一番一般的かもしれません。

応用編

Awesome Photorealistic Coloring Techniques

こちらは、少しだけ応用編。大まかなところはパスで囲んで、髪の毛など細かい部分はチャンネルで切り抜く合わせ技です。

A Comprehensive Introduction to Photoshop Selection Techniques

こちらはPhotoshopを利用した様々な切り抜き方法がまとめられています。参考にどうぞ。

クリック一回でプロの仕上がりPhotoshopアクションファイルいろいろ

admin — Thu, 19 Feb 2009 03:15:35 +0000

Photoshopのアクションファイルは、ブラシ同様に多くのクリエイターが無料で配布している、Photoshopで読み込み可能なファイルです。

アクションファイルは、あらかじめPhotoshopの作業工程が記憶されているファイルで、その作業工程を自動で再現してくれる、とっても便利な機能です。

プロの技を保存したアクションファイルを手に入れると、クリック一回でプロの作業工程を再現してくれるのです。

まずは、アクションファイルのインストール方法から。

1. アクションウインドウを開く

既に、いくつかのアクションがプリセットされています。

2. アクションファイルを読み込む

アクションウインドウの右上の矢印ボタンをクリックして、『アクションファイルの読み込み』をクリックして、インストールしたいファクションファイルを選択します。今回、インストールしたアクションファイルは、こちら

3. アクションファイルのスタート

読み込んだアクションを選択して、ウインドウしたの矢印ボタンをクリックしてアクションをスタートします。

今回、以下の画像を用意していたのですが。

クリック一回で以下のようになりました。

このように、アクションファイルを利用すると自動で画像の加工をしてくれます。

他にもたくさん無料でアクションファイルが公開されているので、いくつかまとめてみました。

The Ultimate Collection Of Useful Photoshop Actions

おなじみSmashingMagazineさんのアクションファイルまとめ。タイトル通り、最強のコレクションです…。

http://www.visual-blast.com/photoshop/124-free-photoshop-actions/

こちらのまとめもいい感じ。クオリティの高いアクションファイルがたくさんまとめられております。

Photoshop Actions on deviantART

deviantARTのアクションページにもたくさんファイルがアップされています。以下は人気順にアクションファイルを表示してみました。さすがに人気の高いアクションファイルはクオリティ高いです。

PanosFX.com – PS Freebies

こちらもたくさんアクションファイルが公開されています。サンプルで使用した扇子のアクションは、こちらからダウンロードしました。

ADDICTED TO DESIGN

数は少ないですが、無料でいい感じのアクションファイルが公開されています。有料版もあります。

Action Central

すこしわかりづらいのが難点ですが、数はかなりあります。

Digital Darkroom

こちらも少しわかりづらいのですが…。結構使えるアクションファイルが多数掲載されています。

真似からはじめるウェブデザイン

admin — Mon, 09 Feb 2009 22:54:34 +0000

ウェブデザインを上達させる一番早い方法は、やはり真似をすることなのではないでしょうか？

特にこれからウェブデザインをはじめる方々には、チュートリアルなどを沢山こなして、いろいろなデザインの手法などをひとつひとつ身に着けていくうちに自分のスタイルができてくるのではないでしょうか？

先日、noupeさんのブログで『Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices』というすばらしいまとめがアップされていたので、そこからピックアップしてご紹介。

この記事では、人気のウェブデザインの背景デザインとそのデザインのチュートリアルがまとめて紹介されています。

『あぁ。このデザインかっこいいなぁ』と思っても、なかなか真似できないレベルの高いデザインでもチュートリアルを追っていけば何とかそれっぽくできるものです。

少しずつマスターして、カッコいいデザインが作れるようにがんばりましょう！

Viget Labs

水彩画風の背景デザイン

Viget Labs

How To: Make the Viget Inspire Background

こちらは、Viget Labs自らチュートリアルを公開されています。風景写真を元に加工して背景を作っていきます。

Create a Nature Inspired Painted Background in Photoshop

こちらは、ブラシを利用して、背景を描いていく方法です。

Sony CES 2009

ちょっぴりレトロなデジタルのボケ味風の背景

Sony CES 2009

Awesome digital bokeh effect in Photoshop

Photoshopを使って、ボケ味風の背景を作る方法です。

GoodBytes Blog

キレイな光のラインを背景に使った例

GoodBytes Blog

Abduzeedo Job Board banner in Fireworks

こちらは、Fireworksのチュートリアルですが、光のラインをキレイに作り出しています。

hereslifeafrica

破れた紙を背景に

hereslifeafrica.com

Create a Realistic Torn Paper Effect in Photoshop

ブラシとテクスチャをうまく使えば、やぶれた紙の質感が作り出せます。

Blog Amuki

古びた紙を背景に

Blog Amuki

Creating Old Paper With Custom Brushes

紙をクシャクシャにして、スキャンして加工すれば、古びた紙が作り出せます。

STUDIO7DESIGNS

オーロラを背景に

STUDIO7DESIGNS

Aurora Borealis – North-South Polar Lights

グラデーションとフィルターを使えば、オーロラ風の背景が作れます。

AdaptD

虹のラインを背景に

AdaptD.com

Mix Cool Retro Curves Into Your Photographs

ブラシと変形ツールでキレイな虹を再現

Jared Campbell

ビンテージ風な背景

Jared Campbell

Create a Wicked-Worn Vintage Pop Art Design

テクスチャとシェイプツールでビンテージな背景を作るチュートリアルです。

Bart-Jan Verhoef

擦り切れた感じの背景

Bart-Jan Verhoef

Bart-Jan Verhoef: Make it worn

Bart-Jan Verhoefさん自身が、この擦り切れた感じのデザインの作り方を解説してくれています。

Boompa

カラフルな背景

Boompa

Painted Photo Manipulation

写真とブラシでコラージュしていけば、カラフルな背景ができていきます。すこしセンスが必要？

Starbucks Coffee At Home

手書き風の背景

Starbucks Coffee At Home

Pencil It In

手書きで書いてスキャンして、テクスチャ画像と合成

15 Great Examples of Cloned WordPress Themes

こちらは、他の有名サイトを真似て作られているWordPressのテンプレート集です。このように、他のサイトを真似てテンプレートを作るとかなり勉強になりますよ。いくつかピックアップしてご紹介。

2008年ウェブデザイン総まとめ

admin — Tue, 30 Dec 2008 09:02:12 +0000

2008年もあとわずかですね。

今年一年、デザインウォーカーの記事を楽しみにしていただいた多くの皆様、どうもありがとうございました！
今回は2008年のウェブデザインを振り返る今年最後の総まとめをお送りします。

インスピレーション
Photoshopブラシ
チュートリアル
ベクター素材
アイコン
ロゴ
テクスチャ
CSS

と８つのブロックに分けてご紹介します。

インスピレーション関連

100 Websites With Outstanding Artistic Design

見てるだけで、思わずため息が出てしまいそうな、アーティスティックなウェブサイト100選

Top 100 Web Designs in 2008

radiiateさんが選ぶ2008年のウェブデザイントップ100

Best of CSS Design 2008

WebDesignerWallさんが選ぶ2008年のベストCSSデザインサイト

Most beautiful websites of 2008

CrazyLeaf Design Blogさんの選ぶ2008年の美しいウェブデザインまとめ

2008 Design Trends

2008年のデザイントレンドが分かるまとめ

40 most beautiful and inspirational website designs of 2008

美しいウェブサイトデザイン40選です。

50 Beautiful Blog Designs

とっても美しいデザインのブログ50選

30 Beautiful Examples of Grunge in Web Design

今年、流行ったグランジ系のウェブデザイン30選です。

Grunge Design Inspiration Showcase

グランジデザインに挑戦したい方の為のまとめ。インスピレーションサイト、Photoshopブラシ、テクスチャ、チュートリアルなどがまとめられております。

57 Vector Characters

今年、流行したマスコットキャラクターを使ったウェブデザイン57選です。

40+ Beautiful Hand-Drawn Websites

手書き風ウェブデザイン40選

50 Beautiful And Creative Portfolio Designs

デザイナーのクリエイティブなポートフォリオサイトが50種類

40 Beautiful Dark CSS Website Designs

ダークな色味でかっこいいウェブサイト40選

25 Super Cool Paper Inspired Website Designs

紙をモチーフにしたウェブデザイン25選

24 Beautiful and Creative Website Headers

インパクトがあって美しいヘッダーデザインのウェブサイト２４種類

50+ Gorgeous Navigation Menus

ウェブデザインに欠かせないナビゲーションメニューが50種類以上まとめられております。

60 Really Cool and Creative Error 404 Pages

個性的な404ページのデザインが60種類まとめられております。

50 Excellent Blog Footer Designs

とってもきれいなブログのフッターを50種類まとめられております。

40 Beautiful and Creative Website Footers

こちらも、フッターの美しいウェブサイト40選

Photoshopブラシ関連

50 Free Photoshop Brush Sets for Modern Design Trends

最近のウェブトレンドデザインに使えるPhotoshopブラシ50選

50 Must-Have Photoshop Brushes

持ってて損は無い50種類のPhotoshopブラシ

75 Insane High Res Photoshop Brushes

解像度が高くて、クオリティの高いPhotoshopブラシが75種類

High Quality Photoshop Brushes, Resources and Tutorials

クオリティの高いPhotoshopのブラシとチュートリアルまとめ

64 Beautiful And Free Nature Brush Sets And Vectors – Giant Design Pack

自然をモチーフにした64種類のPhotoshopブラシとベクター素材のまとめ。

200+ Photoshop Brushes for Light, Sparkles, Glows and Glitter

200種類以上のキラキラ系Photoshopブラシがまとめられております。

500+ Space Brushes for Photoshop

宇宙をモチーフにしたPhotoshopブラシが500種類以上！

1000+ great Photoshop free brushes by PaulW

PaulWさんがデザインした、とってもきれいなPhotoshopブラシが1000種類以上！

チュートリアル関連

30 Beautiful Photoshop Text Effect Tutorials

めちゃめちゃきれいなPhotoshopテキストエフェクトのチュートリアルが30種類

50 Creative Photoshop Text Effects

きれいなPhotoshpのテキストエフェクトが50種類

23 Most Incredible Photoshop Tutorials

とってもレベルの高いPhotoshopのチュートリアル23選。

50 Great Photoshop Tutorials for Clever Beginners

とってもきれいなPhotoshopのチュートリアルが50種類まとめられております。

70 Beauty-Retouching Photoshop Tutorials

人物写真を美しく見せるレタッチ系のPhotoshopチュートリアル70種類。

40 Excellent Photoshop Tutorials for Textures and Backgrounds

40種類のテクスチャと背景に関するPhotoshopのチュートリアルです。質感のあるデザインを作りたい方、必見です。

41 Nicest Photoshop Photo Effects

とってもクールなPhotoshopチュートリアルが41個

25 Photoshop Tutorials for Web Designers

WEBデザイナーの為のPhotoshopチュートリアル25選。ナビゲーションを作るチュートリアルが豊富です。

Free Adobe Illustrator Tutorials | Layers Magazine

Illustratorのチュートリアルがいっぱいです。

30 Tutorials That Will Teach You Fireworks

Fireworksのチュートリアルが30種類

ベクター素材関連

30+ High Quality And Free Vector Object Sets To Beautify Your Designs

あなたのウェブサイトをきれいに飾ってくれるとってもクオリティの高いベクター素材が30種類以上まとめられています。

60 Free Vector Graphics for Digital Art Pros

プロが作った無料のベクター素材が60種類！どれもクオリティが高いです。

アイコン関連

50 Most Beautiful Icon Sets Created in 2008

noupeさんの選ぶ2008年の最も美しいアイコンセット50選

40 Beautiful Free Icon Sets

とってもきれいな無料アイコンが40セット

22 (New) Free High Quality Icons Sets

ハイクオリティなアイコンセット22種類

40+ Extremely Beautiful Icon Sets Hand-picked from deviantART

とってもきれいなアイコンセットをdeviantARTから40種類以上ピックアップされています。

ロゴ関連

10 successful logo redesigns

今年リニューアルされた企業ロゴが10種類。

33 Exceptional Logo Re branding In 2008 For Your Inspiration

こちらも2008年にリニューアルされた企業ロゴ33種類のまとめです。

105+ Logo Design Tuts And Resources

ロゴデザインにはまった時に使える、100種類以上のロゴデザインチュートリアルと、素材集まとめ

50+ Kick Ass Logos for Inspiration

50種類以上のロゴが集められております

30 Brilliant Vector Logo Designs, Deconstructed

30種類の、かわいらしいロゴがまとめられております。

10 trends that will define logo design in 2008

2008年のロゴのトレンドデザイン

35 Stunning Black and White Logos

よくデザインされたロゴは白黒でも良く映えます。３５種類の白黒ロゴまとめ

テクスチャ関連

60 Impressive Free High Resolution Textures and Backgrounds

60種類もの高解像度なテクスチャがまとめられています。いろいろ使い道がありそうですね。

300+ Vintage Style Textures and Photoshop Brushes

300種類を超えるビンテージ系のテクスチャとPhotoshopブラシのまとめ

29 Most Useful Texture Packs of 2008

使い勝手の良さそうなテクスチャが29種類。

60+ Free Textures from SXC.hu

SXC.huでダウンロードできる、使えるテクスチャ画像の60選です。

30 Great Free Paper Backgrounds and Textures

背景や写真などと組み合わせて使える紙のテクスチャ画像30種類

Free High-Res Texture Pack: The Anatomy of a Really Old Book

高解像度の古い本をモチーフにしたテクスチャセットです。

400+ High Quality Patterns

400種類を超えるクオリティの高いパターンファイルまとめ

CSS関連

10 Challenging But Awesome CSS Techniques

初心者の方には、すこし難易度が高いかもしれませんが、挑戦したくなるCSSのテクニック10選です。

15 CSS Tricks That Must be Learned

必ず、どこかで役に立つ。覚えておいて損は無い15種類のCSSトリックです。

それでは、みなさんよいお年を！

DESIGN IT! magazine vol.2(2008 (2)

「DESIGN IT! magazine」vol.2が発売されております。今回の特集は「ユーザーエクスペリエンスの価格」です。サイトの使いやすさだけでなく、ユーザーがどれだけ心地よく楽しんでサイトを利用できるかをポイントに詳しく解説されております。

DESIGN IT!magazine

Photoshopファイルがダウンロードできるサイトまとめ

admin — Tue, 02 Dec 2008 19:48:32 +0000

これまで何度かPhotoshopのチュートリアルをご紹介してきました。

初心者の方々から、「途中でやり方がわからなくなってしまいました。」などと、ご質問いただくことがあります。

確かに、チュートリアルを追って行くのは、ある程度Photoshopを使いこなしていないと難しいかもしれません。

今回は、『百聞は一見にしかず。』

クオリティの高いPhotoshopファイルがダウンロードできるサイトをまとめてみました。

Photoshopで開いて、中身が見れるので、レイヤーの構成がどのようになっているのか確認することができますね。

DesignWalker » Photoshop関連

ビジネスサイトに使えるレイアウトのチュートリアルいっぱい

Photoshop ブレンドモードを使いこなしてワンランク上の画像合成

photoshopでゼロから作るウェブデザイン チュートリアル30選

Photoshopレイヤースタイルいろいろ

Photoshopで作るウェブデザイン レイアウト・チュートリアル50選

Photoshopを使って背景をきれいに切り抜く方法まとめ

動画チュートリアル

抽出ツール

photoshopでゼロから作るウェブデザインチュートリアル30選

Photoshopで作るウェブデザインレイアウト・チュートリアル50選