Photoshop / Illustrator

Photoshop制作基本

• text01 「レイヤースタイルの基本」Webデザインの信頼性を高めるレイヤースタイルとは。
• text02 「影の設定」ドロップシャドウ、シャドウ（内側）、光彩（外側）の基本設定。
• text03 「塗り潰しの設定」カラー、グラデーション、パターンの各オーバーレイ基本設定。
• text04 「境界線の設定」オブジェクトのアウトラインとなる境界線の基本設定。
• text05 「レイヤースタイルの応用」レイヤースタイルの設定を組み合わせた作り込み方法。

Web Basic Design（.pdf DownLoad/30.3MB/10h）

• 紙とWebの違いやテーマ、ターゲットなど制作前の3つの観点に注目。
  そして基本技術「レイアウト・配色・文字組み」に重点を置いて解説。さらに、
  フォトショップ「選択・描画・レイヤー・マスク・レイヤースタイル・ショートカットなどの技術てきな実習や、ディテール・メイン画像・アイコンなどの応用表現まで。
  信頼されるデザインの基本的な考え方を学びます。
  

Banner Design（Slide/3h）>> .pdf 練習問題

• さまざまなサンプルのポイントをチェックしながら、
  4つのパターンでバナーをデザインしていきます。
  

Icon Design（Slide/1h）

• 見落としがちなアイコンの重要性を、再度ピックアップ。
  アイコンが必要なサイト例や、簡単な立体オリジナルアイコンの作り方、
  また3Dアイコンの構造などを解説。
  

様々な制作表現の解説

• Operation 「Webデザイナー視点から見たPSCS6の進化」写真合成機能の大幅な進化
• Operation 「Photoshop CS4 基礎講座」基本的なツールの使い方を画像入りで丁寧に解説（日本語）
• Operation 「ツールパネルの基本操作」PhotoshopでWebデザインをしたい初心者のための基本ツール解説（日本語）
• Operation 「Photoshopの便利なスクリプトや拡張機能」PSDからテキストを抽出など（日本語）
• Operation 「Adobe Configuratorでオリジナルのツールパネルを作成」CS5からのフリーダウンロード
• Operation 「Web Design Library」わかりやすい図解入りで実践的なテクニックを多数解説（日本語）
• Operation 「Webデザインの1pxを作るためのPsのレイヤースタイル」1pxにこだわったレイヤースタイルの基本操作
• Operation 「PSでやってしまいがちな12個の間違った使い方」初心者にありがちな間違い、誤用、乱用といったリスト
• Operation 「Photoshopでの作業をより早くより簡単にする20のTips」作業を今までより早くより簡単にする20のTips
• Operation 「12Common PS Mistakes」Photoshopのやってしまいがちな12個の間違った使い方
• Operation 「あなたの知らないショートカット25」頭のイメージを素早く形にするための作業効率アップリスト（日本語）
• Operation 「高速でphotoshopを使う」ショートカット一覧ではわからない組み合わせ一覧（日本語）
• Operation 「ツールショートカット図」ツールウィンドウの英数選択を、キーボード上のショートカットで配置説明（英語）
• Operation 「ツールショートカット図」PhotoShop用キーボードステッカー
• Operation 「厳選されたHtmlCssPsdの制作説明ガイド」デザインよりならステップbyステップで理解もできる（英語）


• Text 「黄金文字」本物のような輝きがまぶしい黄金文字をPSで制作解説（日本語）
• Text 「Dynamite Design Blog」PSでの素材作成や質感のあるタイポグラフィの作成方法など（日本語）
• Text 「1st WebDesigner」PSでのタイポ素材、2012年2〜3月分の作成方法（日本語）
• Text 「2011年に公開されたチュートリアル総集編」2011年印象に残る文字エフェクト総集編（英語）
• Text 「2012年ロゴエフェクトチュートリアル30個まとめ」2012年4月分のチュートリアルまとめ（英語）
• Button 「細部にこだわったUIエレメントの作成方法」ボタンのエッジに付く光と影の考え方とその表現方法（日本語）
• Button 「レイヤースタイルを使ったボタンデザイン」 サイト用のボタンを作るための基本テクニック（日本語）
• Button 「レイヤースタイルで中央に向かってぼかす技法」 更に立体的で奥行きのある雰囲気にする手法（日本語）
• Button 「Webデザイン制作に使える４つのテクニック」レイヤースタイルやグラデーションの質感表現（日本語）
• Button 「Design Tech」ダウンロードボタンやメイン画像の細部にこだわった表現方法の流れを解説（英語）
• Button 「Webデザイン向けチュートリアル16個」ナビやトップページのリッチな表現解説（英語）一部psd付き。
• TopPage 「極座標フィルタを使った放射の描画テクニック」 使い所の分かりにくい極座標での小技を紹介（日本語）
• TopPage 「トップレイアウトパターン制作方法集」 PSで制作するトップページの詳細なテクニック（英語）
• TopPage 「水彩タッチのエフェクトチュートリアルまとめ」 写真画像を水彩タッチにしたりマスクをかけたり（英語）
• TopPage 「今時のデザインのウェブサイトの作り方を丁寧に解説」 透明感やグランジ風・イラスト風など（英語）
• PhotoImg 「Photoshop SFX」フィルターを使用した実務に使える様々な表現方法をPSで制作解説（日本語）
• PhotoImg 「日本語で読めるPhotoshopチュートリアル集まとめ」カラフルな光や残像の表現方法など（日本語）
• PhotoImg 「インパクトあるイラストや合成photoの作成方法」これは！と思われるキラーチュートリアル30個
• PhotoImg 「Appleデザインのような金属の質感を表現」ステンレンスのシャープな表面イメージ（日本語）
• PhotoImg 「ボケた光がキラキラに輝く無料テクスチャ素材45個」女のコのキラキラした夢の世界など（日本語）
• PhotoImg 「役に立つPhotoshop高品質画像作成手法50本」2011年に最も印象的だったチュートリアル50本（英語）
• PhotoImg 「Photoshop関連のネタ帳」凝ったデザインの作り込み方法や、便利なダウンロードのリンク集など（日本語）
• PhotoImg 「閃光表現作成法16パターン」湯気や火花、光や透過など様々な表現方法を解説（英語）
• PhotoImg 「Photoshopの様々なエフェクト効果がわかるチュートリアル集」ちょっと凝ったエフェクト表現（英語）
• PhotoImg 「真似したくなるすごい画像制作方法」ドーナッツや水彩など様々なリアルなイラストの表現解説（英語）
• Retouch 「レベル補正や彩度調整」基本的な画像加工編集処理
• Retouch 「複数枚の写真からPhotoshopで動いている物を自動で消す方法」移動する人物全部自動で消す
• Retouch 「髪の毛の画像を1分で切り抜く方法」マスクパネルでピクセルマスクを追加
• Retouch 「プロ級の写真加工無料アクション素材28個」クリックひとつで完成するアクションファイルの紹介
• Retouch 「初心者でも簡単に人物補正する3つのテクニック」人物補正テクを分かりやすく紹介
• Retouch 「すごすぎる写真加工レタッチ術20個」魔法のような本格的なレタッチテクニックを20個紹介
• Retouch 「ぼんやりした画像をくっきりさせるレタッチ技術」元画像を劣化させず、ねむい画像をくっきりと
• Retouch 「トーンカーブの使い方」明度、色調、コントラストなどを補正
• Retouch 「photostudioレタッチチュートリアル」3Dやパノラマ、HDR処理など
• Animation 「簡単にPSで作れるGIFアニメシネマグラフ作成法」繰り返しの動画アニメをPSで作る方法を紹介（日本語）

実データ（psd）やパターン・ブラシ・シェープなどのサンプルリンク

• psd_Art 「Visual deviantART」ダイナミックかつリアルなイメージ画像をpsdデータで大量にダウンロード可能
• psd_Art 「Visual QBrushes」ダイナミックかつリアルなイメージ画像をpsdデータで大量にダウンロード可能
• psd_Art 「PHOTOSHOP VIP PSDまとめ」いろんなテーマに合わせたPSDチュートリアルのまとめ
• psd_Site 「Top Layout Sample PSD」レイアウトの参考にしたいPSD素材フリー25個
• psd_Site 「WebSiteTemplate」リッチで高級感のあるサイトの10個のpsdデータをフリーダウンロード可能
• psd_Site 「質感ばっちりプロ級Webレイアウト用チュートリアルまとめ」幾つかのサンプル用PSDファイルをDL可能
• psd_Site 「PSDからXHTML+CSSを作っていくチュートリアル30」モックアップやポートフォリオなどのリスト
• psd_Site 「PS無料配布パターンとトップPSD素材リンク集」質感の高いデザインパーツ配布サイトを公開
• psd_Parts 「仕事、プライベートで使いたい無料PSD素材50個」テキストや色を編集するだけでオリジナルテイストに
• psd_Parts 「リアルなAV音響チューナーを再現したUIデザイン30個」印象的なインターフェースデザイン
• psd_Parts 「web開発に便利なPSD素材集」iPadnanoやAdobeCS5アイコンパックなど
• psd_Parts 「紙やノートの端が少しめくれたPSD全36種」シンプルな四角い紙のすみっこがめくれてるpsd画像
• psd_Parts 「ウェブ制作にすぐに使えるPSD素材1000psd.com」アイコン、UIエレメント、テクスチャ、イラストなど
• psd_Parts 「細部にこだわる本格PSD素材45個」iphone,ipadモックアップやクレジットカード、3Dボタンなど
• psd_Parts 「フレームワークに有効なUI素材PSD50個まとめ」ボタンやアイコンなどの高品質キットまとめ
• psd_Parts 「質感たっぷり高品質なUIパーツやアイコン、バッジ60個」ジャンルが様々な良質素材
• psd_Parts 「無料PSD素材72個まとめ」様々なサンプル素材をフリーでダウンロード
• psd_Btn 「無料PSDボタン素材60個」様々なボタンのサンプル素材をフリーでダウンロード
• psd_Btn 「Button42」立体的でリアルなボタン画像42個のサンプルpsdデータをフリーでダウンロード
• psd_Btn 「BUTTON-DL.com」完成されているボタン画像のpsdデータをフリーでダウンロード
• psd_Icon 「ECサイトの商品タグや表テーブル無料PSD素材45個」良質の値札やタグバッヂ
• psd_Icon 「リアルなアイコンデザイン30個まとめ」身近な生活用品をコンパクトな3Dアイコンに成型
• psd_Icon 「質感の高いデザインアイコン素材50個」クレジットカードやWebサービスアイコンなど
• psd_Icon 「シンプルなディテールUIエレメントPSD素材」大・小、各25種類
• psd_Icon 「3Dの立体アイコンや高品質の質感パーツ50個PSD素材」ダウンロード可能な素材も多い
• psd_Icon 「ソーシャル系無料アイコン素材34個」Twitterやfacebookなどのロゴ
• psd_Icon 「アップル製アイコン風フリーアイコン99個」MacやiPhoneに出てきそうなアイコンセット


• pattern 「poyosicom」ノイズ系モノクロパターンテクスチャ100枚
• pattern 「pattern color」自分で好きなパターンを大量に選び、各部分の色を好きに選択し、オリジナルパターンを作成可能
• pattern 「オシャレで繋ぎ目のないバックグラウンド画像集」ちょっと変えるだけでオシャレなサイトに変わるかも
• pattern 「レトロな背景パターン15」懐かしさを感じさせたりするような背景パターン15種類
• pattern 「20のシームレスパターン」メタル金属やグリッド、パステルカラーの繰り返しパターン
• pattern 「ステンドグラスやざらっとした紙のパターン素材」ステンドグラス、スノー、フェルト、ざらっとした紙
• pattern 「紙とか布地のパターン素材」ざらっとしたシームレスなテクスチャ素材
• pattern 「テクスチャ、パターン系の素材サイト全部」こういうサイトを見てテクスチャのアイデアを探してみよう
• pattern 「継ぎ目のない無料パターン50個まとめPS/AI」布地のテキスチャーにあるような花柄やアニマル、リボンなど
• pattern 「フリー花柄パターン17種類」背景の塗りつぶしなどでカーテンにありがちな花柄パターン
• pattern 「Photosopパターン定義テキスチャ」背景に使う繰り返しのイメージパターンを無料でダウンロード
• pattern 「50 + Pattern sets」背景に使う繰り返しのイメージパターン50個を無料でダウンロード可能
• pattern 「Pattern Link by PS VIP」背景に使う繰り返しのイメージパターンのリンク集。無料でダウンロード可能
• pattern 「Pattren Link by KACHIBITO.net」背景に使う繰り返しのイメージパターンのリンク集。無料でダウンロード可能
• pattern 「70 Damask Patterns」アラビア絨毯模様のイメージパターンを70個フリーダウンロード可能


• brush 「2012年新しく公開されたプラグイン素材50個」ページの最後にブラシのインストール方法も紹介
• brush 「質感系Ps無料ブラシ素材50個まとめ」持っておくと何かと便利なアイテムのまとめ
• brush 「汚れダストグランジ系ブラシ22個」奥行き感を与えることができる汚れテクスチャ
• brush 「汚れやグランジ系ブラシ50個」汚れた図面、フラクタル、グランジ、渦巻、装飾品など
• brush 「416 Bright Brush」光のラインシリーズとしてブラシの設定方法を解説。フリーでダウンロード可能
• brush 「Water Splashes」水しぶきのシルエットパターンをブラシでフリーダウンロードが可能
• brush 「和や京都っぽさを演出するのに使えるPhotoshopのパターンとブラシ」昔ながらの渋い模様やイラストなど
• brush 「かわいい花柄デザインの無料ブラシ保存版」かわいさを演出する様々な花柄のブラシイラスト
• brush 「レトロなスタンプを表現できるブラシ30」古い切手やスタンプなどのレトロスタンプPhotoshopブラシ
• brush 「音楽関連のサービスを作る際に使えるブラシ32」楽器や音符・AV機器などの音響関連ブラシイラスト
• brush 「FindBrushes」ブラシの絵柄を総計12000以上ものストックの中から検索して探せし出せる
• brush 「WE♥BRUSHES」カワイイイラストが描かれたプリント柄のブラシリストが盛りだくさん。


• shape 「85 Free Silhouette ShapePattern」シルエットのシェープパターンを85個無料でダウンロード可能
• shape 「Design Resource Box」カスタムシェープパターンが無料でダウンロード可能
• texture 「Missesglass」カラフルで鮮やかな散り花や、和テイストの美しいイラストテクスチャ
• texture 「新デザインテクスチャ無料素材45個」水彩模様やペイント、輝き、マーブル、クランジ、シミなど
• texture 「Texturemate」多種多様なテクスチャ素材をフリーでダウンロード可能
• texture 「テキスチャー画像76枚」フリーのテクスチャ素材76枚がダウンロード可能
• texture 「様々な背景に使えるテクスチャ画像集総まとめ」水や砂・布地の模様などフリーテクスチャが自由にＤＬ可
• layerStyle 「PSで1クリックで設定できるメタル風3Dロゴ」映画タイトル風にカッコイイロゴが一瞬で作れるスタイル集
• layerStyle 「750 + Free PS Layer Style」レイヤースタイルのインストール方法の解説や750個をダウンロード可能
• total plug-in 「LADYOAK」フリーで大量のプラグイン（brush/gradient/pattern/shapes/styles）がダウンロード可能
• total plug-in 「slice-tip」CS4forMacプラグインで、各スライスをレイヤー上に保存管理できるプラグイン
• action「ノスタルジックな写真加工アクション集35個」撮影した写真をクリックひとつでプロ級に仕上げるフィルター
• action「画像の雰囲気を劇的に変えられるPhotoshopアクション33個」印象的で雰囲気のある画像編集
• action「Ps無料アクション素材80個」アクション素材をフリーで80個ダウンロード可能
• action 「Color Tech100」様々な写真レタッチのアクションをフリーで100個ダウンロード
• plugin 「GUIDE GUIDE」グリッドを数値で縦横に設定できるプラグイン
• total link 「photoshop関連まとめ」ブラシ、psd、plug-in、グラデーション、レイヤーなど無料配布サイトを一覧表示
• JSX 「AdobePhotoshopCS6 JS自動化作戦」Psに設定するJavascriptのTipsやHowtoリストが満載
• JSX 「AdobeCS6 JavaScriptリファレンス」JavaScriptの制御メソッド一覧
• JSX 「シェイプ作成.jsx＆JSXの作成方法」シェイプの縦横角丸と配置位置を数値指定できレイヤー名に指定
• JSX 「shape_dearps.jsx」シェイプの縦横角丸を数値指定できるポップアップスクリプト
• JSX 「PS_BRAMUS.TextExport 1.3.jsx」PSDファイルからテキストを抽出するスクリプト
• JSX 「slice_Set.jsx」レイヤー名をスライス名に設定
• JSX 「sliceGroup_Set.jsx」同梱されている複数のレイヤーからのスライス出力
• JSX 「fw_slice.jsx」Fireworks風のスライスレイヤーで管理可能
• JSX 「ぶっこ抜き.jsx」一部のレイヤーやレイヤーセットをPNGで書き出すスクリプト
• JSX 「addGuide.jsx」選択範囲に合わせてガイドラインを設定
• JSX 「setLayersetVisiblity.jsx」レイヤーセットを一発で表示／非表示するスクリプト
• JSX 「kadomaruSelect.jsx」選択しているレイヤーと同じ大きさの角丸パスを作成
• JSX 「dot_dash_line.jsx」波線をマスクで作成
• JSX 「Distribute Layer Spacing Horizontal 0-2-0.jsx」等間隔にナビテキストを配分整列（横）
• JSX 「Distribute Layer Spacing Vertical 0-2-0.jsx」等間隔にナビテキストを配分整列（縦）
• JSX 「Difference.jsx」psdデータの微妙な違いを検知する比較スクリプト
• TipsSite 「DTP Transit Photoshop」常に乗り継ぎを強いられるDTPユーザーのために
• TipsSite 「Dp Dearps」Photoshopに関するTipsや便利な裏技を紹介
• TipsSite 「Stocker.jp/diary」Webデザインのための様々なテクニック記事
• TipsSite 「ADOBE PHOTOSHOP MAGAZINE」Photoshopの使い方

ブラウザ上ジェネレーターやその他関連リンク

• topics 「10Simple Steps to Better PS Performance」Photoshopの動作を軽快にするための10のポイント
• topics 「Photoshopの写真加工の魅力」写真画像をどのように加工すると魅力的になるか11個の表現方法で解説
• topics 「写真のレタッチ（色調補正）に覚えたい機能」 写真の画像補正をするときのテクニックやポイント
• topics 「PsよりFwのほうが優れている10の理由」 マスク効果のグラフィック面を考えるとやっぱり自分はPs派
• topics 「劣化したJPEG画像を修復できるJpegEnhancer」 JPEG元画像を修復後の画質と比較しフィルタ強度を調整
• topics 「Photoshop登場までの知られざる歴史」 1990年どういうきっかけでPSが作られたかのキッカケ
• topics 「Photoshop歴代の起動画面」 1990年モノクロ画面からのアプリUIの変遷
• generator「More Generator Tools」初心者向けデザイン加工ツールいろいろ
• generator 「Button Generators」ボタンの色や立体感、グラデーションを自分で調整し、画像を自動生成
• generator 「Dotted Background Generator」背景パターンの色やドットの大きさを調整し、自動生成するツール
• generator 「TARTAN MAKER」タータンチェックの色や線の太さ、絵柄を調節し、画像を自動生成してくれるツール
• brush 「Brush Point」必要なブラシをプレビューし、その場でインストールし容量負担を軽減（forMac/1500円）
• ImgTool 「SmillaEnlarger / more」画像を拡大したときのエッジや画質の荒れを補完してくれるツール（forWin）
• ImgTool 「JPEGmini」JPEG画像容量を1/5に軽量化サービス
• ImgTool 「Recolored」モノクロ画像のカラーを復元するソフト（2400円）
• ImgTool 「PhotoSketch」フリーハンドの落書きから、自動で画像を検索し、切り抜き合成してくれるソフト（現在不通）
• Youtube 「dove evolution」モデルの撮影写真をphotoshopで補正する動画

Illustrator

• HowTo 「Illustrator基本操作」これからIllustratorを始めてみようという人のための基本操作
• HowTo 「中学生でもわかるベジェ曲線」点同士をつないだ線分上を動く点をイメージする
• HowTo 「ベジェ曲線をマスターできるゲーム」英字の輪郭をうまくトレースして点数評価
• HowTo 「ベジェ曲線でスキャンした女の子をトレース」Illustratorでイラストを描く動画
• HowTo 「illustratorでサイトデザインのメリットデメリット」作業効率などの観点から
• HowTo 「illustratorで1pxのラインがぼける時の対処法」ピクセルグリッドに整合
• HowTo 「AIで箇条書きの頭の揃え方」リストの文頭を揃えるときのテクニック
• HowTo 「AIで文章の文字を綺麗に組む方法」流し込みだけでなく最低限しておく4つの設定
• HowTo 「ショートカット一覧」イメージを素早く形にするためのショートカットリスト
• Brush 「イラストレーターで使える無料ブラシデータ」筆跡のラインなど様々を無料でDL


• Tutorial 「高品質なテクニックを学べるチュートリアル」日本語解説でわかりやすい
• Tutorial 「Illustratorマジックすご技チュートリアル30個」独特の色合いを表現
• Tutorial 「イラストレータチュートリアル40個」テクニックの組み合わせ方も紹介
• Tutorial 「Illsutratorのチュートリアルビデオ30個」動画で制作進行が簡単に理解
• Tutorial 「AIですごいテキストエフェクトチュートリアル50個」豪華なロゴ作成に
• Tutorial 「テキストエフェクトのチュートリアル50個」リアルな表現をベクターで再現
• Tutorial 「すごいロゴ・エフェクトの作り方40個」イラレで作るテキストエフェクト
• Tutorial 「すご技デザインチュートリアル30個」表現の幅を広げる制作テクニック満載
• Tutorial 「イラレスキルをアップさせるチュートリアル40個」様々な関連サイトを紹介


• Beje 「UIアイコンやボタン画像を無料配布するサイト」フォームやPS系など様々
• Beje 「ベクター画像を無料配布している25サイト」様々なサイトの紹介
• Beje 「Vecteezy」epsやaiやpng形式ですぐ使えそうな素材が大量に（登録無し）
• Beje 「FreeVectors」100以上のベクター素材（登録無し）
• Beje 「QVectors」高品質なベクター素材（登録無し）
• Beje 「Vector Junky」ロゴやイラストなどのベクター素材（登録無し）
• Beje 「Clipart lab」ジャンルから選べる米イラスト中心の素材（登録無し）
• Beje 「Vector Valley」素材数は少ないが高品質（登録無し）
• Beje 「Vector Arrow Set」50種類のシンプルな矢印アイコンの紹介（登録無し）
• Beje 「花柄フレーム枠組みの無料素材20個」エレガントな印象の演出に最適（登録無し）
• Beje 「エレガントなオーナメント素材」20種類の迫力のある花柄デザイン（登録無し）
• Beje 「Vector4free.com」ライセンスは各作品ごとに異なるが80点以上が登録（登録無し）
• Beje 「VectorStock」フリーのベクター画像を大量にストック（ログイン登録必要）
• Beje 「IllustAC」ベクターイラストを無料で検索しDLできるサイト（ログイン登録必要）
• Beje 「イラストバンク」日本のイラストを無料で検索（ログイン登録必要）

Font

• HowTo 「文字組みについて本気で考えてみた」人物画の「瞳」と同じくらい大切なもの
• HowTo 「字詰めテスト10問」矢印の左右キーで適切と思う位置にずらしてみる
• HowTo 「Webデザイナーが文字組版の参考になるサイト9つ」これを読み流せばイケル
• HowTo 「使用頻度の高い有名フォント一覧」フォント名を知らないデザイナーが増加中！
• HowTo 「本文のフォントサイズの通常設定は？」日本語MSPゴシックが事実上の標準
• HowTo 「Web制作における文章の可読性」サイトで一番読むのは文章なので可読性は重要
• Sample 「フォントのみで勝負のシンプルなサイト」グリッドや細部のこだわりは必見
• Tools 「HTMLで文字詰めするJavaScript」文字詰めを行えるFLAutoKerningスクリプト
• Tools 「自分の持っているフォントをブラウザ上で表示チェック」loadfontsをクリック
• Tools 「本文の英文字表示テストサイト」フォントを選択して好きな状況を設定

>>目次に戻る