タグ

ブックマーク / www.webdesignlibrary.jp (30)

  • Photoshopでクリッピングマスクを使う方法 / ウェブデザインライブラリー

    投稿日:2010年07月23日   レベル:初級者    ソフトウェア: このチュートリアルでは、クリッピングマスクを使う方法を紹介します。 Step1 : 画像を開いて、文字をかく Step2 : 画像が映った文字をつくる Step3 : ドロップシャドウを適用する Step4 : 色を変える Step5 : 完成

  • Photoshopで写真を木炭画のように加工する方法 / ウェブデザインライブラリー

    投稿日:2010年04月23日   レベル:初心者    ソフトウェア: このチュートリアルでは、写真を木炭画のように加工する方法を紹介します。 Step1 : はじめに Step2 : 木炭紙色のレイヤーを作る Step3 : 背景レイヤーをコピーする1 Step4 : 背景レイヤーをコピーする2 Step5 : 木炭のブラシで塗る Step6 : 木炭紙色のレイヤーにパターンをつける Step7 : 最後に

  • Photoshopでウェブサイトのデザインを作る方法 / ウェブデザインライブラリー

    投稿日:2010年04月02日   レベル:初心者    ソフトウェア: このチュートリアルでは、ウェブサイトのデザインを作る方法を紹介します。 Step1 : はじめに Step2 : スプラッターを追加 Step3 : タイトルを作成 Step4 : ナビゲーションを作成 Step5 : セクションとコンテンツを追加 Step6 : フッターを作成 Step7 : スプラッターを追加 Step8 : 完成

  • Photoshopでウェブサイトをデザインする方法 / ウェブデザインライブラリー

    投稿日:2010年01月12日   レベル:中級者    ソフトウェア: このチュートリアルでは、Photoshopでウェブサイトをデザインする方法を紹介します。 Step1 : はじめに Step2 : タブ型のボタンを作る Step3 : ロゴ、スローガンを配置する Step4 : 6つのボックスを作る Step5 : テキスト・画像を配置する Step6 : 完成 新規ドキュメントを1000ピクセル×1355ピクセルで作成し、 「#2493b0」と「#23454c」の色を選択してグラデーションツールのリニアグラデーションを使って背景を塗ります。 最も明るい色を画面の上にします。 長方形選択ツールで、横がキャンバス幅、縦が50-150ピクセルの長方形を描いたら、 「#222223」の色で塗ります。すると次のようになります。

  • Photoshopでウェブレイアウトを作成する方法 / ウェブデザインライブラリー

    投稿日:2009年12月25日   レベル:中級者    ソフトウェア: このチュートリアルでは、Photoshopでウェブレイアウトを作ってみたいと思います。 Step1 : はじめに Step2 : タイトル・キャッチコピーを入力する Step3 : ボタンを作成する Step4 : 必要な情報を入力する Step5 : コンテンツボックスを作成する Step6 : コンテンツボックスを複製する Step7 : 完成 900x900の新規ドキュメントを作成し、階調の異なる2種類の濃いグレーを背景色/描画色に設定します。 次に、長方形選択ツールでカンバスの一番上に長方形を描き、線型グラデーションで上から下にドラッグして塗ります。 さらに、次のようなレイヤースタイルをその長方形に追加してください。 今のところこんな感じです。

  • PhotoshopでPukkelpopのようなロゴを作る方法 / ウェブデザインライブラリー

    Home > フォトショップ講座 > PhotoshopでPukkelpopのようなロゴを作る方法 PhotoshopでPukkelpopのようなロゴを作る方法 投稿日:2009年09月08日   レベル:初心者    ソフトウェア: このチュートリアルでは、PhotoshopでPukkelpopのようなロゴを作ってみたいと思います。 Step1 : はじめに Step2 : レイヤースタイルを設定する Step3 : 背景を設定する Step4 : シェイプを配置する Step5 : 完成 Pukkelpopとは、ベルギーの巨大なフェスティバルのことです。 そのロゴを数ステップで作る方法を学びましょう。 もしデザインやフライヤーで使ったら、効果的なテキストエフェクトになるかもしれません。 新しいファイルを作ることから始めましょう。 500×300ピクセルのキャンバスを使い、白(fffff

  • Photoshopでカラー写真の一部を白黒にする方法 / ウェブデザインライブラリー

    投稿日:2009年08月25日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopでカラー写真の一部を白黒にしてみたいと思います。 Step1 : はじめに Step2 : 写真を白黒にする Step3 : カラーの部分を調節をする Step4 : 完成

    Photoshopでカラー写真の一部を白黒にする方法 / ウェブデザインライブラリー
  • Photoshopでカラフルなロゴマークを作る方法 / ウェブデザインライブラリー

    新規レイヤーで、楕円形選択ツールの「選択範囲に追加」オプションを指定します。 この操作で、1つのレイヤー内に複数のシェイプを描けます。 レイヤーに色をつけます。 新規レイヤーを作って上記の操作を繰り返します。 上記の操作を繰り返します。 描画が済んだら、テキストレイヤーでテキストを選択します。 「Shift」+「Ctrl」+「I」キーを押して選択範囲を反転させます。 最初に描画したレイヤーを選択して「Delete」キーを押します。 すると、描画を行ったレイヤーがテキストの中に残って文字のシェイプを作ります。 テキストレイヤーで、二番目に描画を行ったレイヤーに対して同様の操作を繰り返します。 三番目に描画を行ったレイヤーに対して同様の操作を繰り返します。

  • Photoshopで太陽光の上にハートが描かれた壁紙を作る方法(独占チュートリアル) / ウェブデザインライブラリー

    Home > フォトショップ講座 > Photoshopで太陽光の上にハートが描かれた壁紙を作る方法(独占チュートリアル) Photoshopで太陽光の上にハートが描かれた壁紙を作る方法(独占チュートリアル) 投稿日:2009年01月20日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopで太陽光の上にハートが描かれた壁紙を作ってみたいと思います。 Step1 : はじめに Step2 : ブラシツールでスプラッターとシードを作る Step3 : カスタムシェイプ・レトロサークルを作る Step4 : ハートを作りペンツールでシェイプを作る Step5 : 完成 新規ファイル(「ファイル」−「新規」)を作成します。 サイズは1280ピクセル×1024ピクセル、解像度は72dpiです。 塗りつぶしツールを使って、新規ファイルを白く塗ります。 新規レイヤーを

  • Photoshopで簡単なマルチタグのアイコンを作る / ウェブデザインライブラリー

    投稿日:2008年12月05日   レベル:中級者    ソフトウェア: このチュートリアルでは、Photoshopで簡単なマルチタグのアイコンを作ってみたいと思います。 Step1 : はじめに Step2 : レイヤーマスクを加える Step3 : グラデーションオーバーレイを加える Step4 : 新たにレイヤーを作りタグを増やす Step5 : 完成 任意のサイズと背景で新規ドキュメントを作成し、角丸長方形ツールを選択して半径を10ピクセルにします。 任意の色で細長い長方形を描いてから、「編集」−「変形」−「回転」を選択して、少しだけ回転させます。 回転させたらレイヤースタイルを設定して不透明度を85%にします。 すると次のようになります。

    moqada
    moqada 2008/12/07
    単語帳のようなアイコンを作る
  • IllustratorとPhotoshopでハーフトーンの背景を作る方法 / ウェブデザインライブラリー

    Home > グラフィック講座 > IllustratorとPhotoshopでハーフトーンの背景を作る方法 IllustratorとPhotoshopでハーフトーンの背景を作る方法 投稿日:2008年8月19日   レベル:初心者    ソフトウェア: このチュートリアルでは、フォトショップとイラストレーターでハーフトーンの背景を作ってみたいと思います。 Step1 : はじめに Step2 : Illustratorで円の格子をつくる Step3 : Photoshopでハーフトーンの背景をつくる Step4 : 完成

  • Adobe Illustratorでシルエットを作る方法 / ウェブデザインライブラリー

    Home > グラフィック講座 > Adobe Illustratorでシルエットを作る方法 Adobe Illustratorでシルエットを作る方法 投稿日:2008年8月12日   レベル:すべて    ソフトウェア: このチュートリアルでは、フォトショップとイラストレーターでシルエットを作ってみたいと思います。 Step1 : はじめに Step2 : Photoshopでコントラストを強くする Step3 : Illustratorでトレースする Step4 : 完成 このチュートリアルではPhotoshopとIllustratorライブトレースツールを使って写真からベクターのシルエットを作る方法について紹介します。Photoshopの知識は工程全体で役には立ちますが必須ではありません。 はじめに、作業に使う写真を選びます。白くてフラットな背景の人物写真があれば理想的ですが、全体に

    moqada
    moqada 2008/08/12
    Illustratorで人物のシルエットを作る
  • Photoshopでスプラッターロゴを作る方法 / ウェブデザインライブラリー

    お楽しみの始まりです。スプラッターを追加しましょう。次の場所からブラシをダウンロードしてください。 ブラシのダウンロード ブラシのセットをインストールするには、[マイコンピュータ]−[ローカルディスク(C:)]−[Program Files]−[Adobe]−[Adobe Photoshop]−[プリセット]−[ブラシ]−[Photoshop Only]を選択して、deviantARTからダウンロードしたファイルをドラッグアンドドロップします。 ブラシを選択します。ブラシツールを選択すると、上部のツールバーにブラシの一覧が表示されます。ブラシが表示されているアイコンまでカーソルを移動させてブラシを選択します。 するとサイドメニューが開きますので、「ブラシファイルの読み込み」をクリックしてインストールしたブラシを選択してください。ブラシのセットが読み込まれます。続いてこれから使うブラシを選び

  • Photoshopでかわいい亀さんにメガネをかける方法 / ウェブデザインライブラリー

    投稿日:2008年6月27日   レベル:中級者    ソフトウェア: このチュートリアルでは、フォトショップでかわいい亀さんにメガネをかけてみたいと思います。 Step1 : メガネを描く Step2 : メガネに立体感を出す Step3 : レンズを作成 Step4 : 完成 亀の画像を開きます。この画像を使ってもいいですよ!! ツールパレットから「カスタムシェイプツール」を選択します。 このシェイプを選択します。 シェイプレイヤーを2つ描き、このように変形します。 ペンツールを使ってもう1つシェイプを描きます(色はすべて黒です)。

    moqada
    moqada 2008/06/27
    ピクサーっぽい画像に眼鏡を足す。
  • 画像に色彩をつける方法 / ウェブデザインライブラリー

    投稿日:2008年6月24日   レベル:中級者    ソフトウェア: このチュートリアルでは、フォトショップで画像に色彩をつけてみたいと思います。 Step1 : コントラストを強調 Step2 : 画像操作 Step3 : コントラストを調整 Step4 : 彩度を調整 Step5 : 完成 画像を開いて背景レイヤーを複製します。 画像のモードをLabカラー(「イメージ」−「モード」−「Labカラー」)に変更しますが画像は統合しません。 「イメージ」−「色調調整」−「トーンカーブ」を選択してaチャンネルとbチャンネルでコントラストを強くします(aは何度か操作を繰り返します)。 拡大画像を表示する 拡大画像を表示する

    moqada
    moqada 2008/06/25
    画像を鮮やかにするチュートリアル
  • モダンなボタンの作り方 / ウェブデザインライブラリー

    投稿日:2008年4月22日   レベル:初心者    ソフトウェア: このチュートリアルでは、モダンなボタンを描いてみたいと思います。 Step1 : 新規ドキュメントの作成 Step2 : 角丸長方形ツールの設定 Step3 : ボタンのシェイプを作る Step4 : ボタンのシェイプの設定 Step5 : 新規レイヤーの作成 Step6 : スタイルの追加 Step7 : ボタンの完成 Step8 : 新規レイヤーの作成 Step9 : テキストの追加 Step10 : 完成

  • 髪の毛などが込み入った背景を削除する方法 / ウェブデザインライブラリー

    投稿日:2008年2月19日   レベル:上級者    ソフトウェア: 対象を背景から引き出す3つの手法についてご紹介します。この中から気に入った方法を使って作業できます。 Step1 : 抽出ツールを使用する Step2 : ブレンドモードを使用する Step3 : チャンネルの使用 画像を開きます。「フィルタ」−「抽出」を選択するか「Alt」+「Ctrl」+「X」キーを押してください。 パレットツールのエッジハイライターツールを使ってモデルと背景の間の縁に色を塗ります。このステップでは、できる限り注意深く作業してください。 塗りつぶしツールを選択してモデルの内側の空間に色を塗ります。 プレビューを押して結果がよければ「OK」を押してください。 するとこのようになります。 モデルの周りの縁がまだ白っぽい場合は、 覆い焼きツールを使って削除してください。 最後はこのようになります。 新しい

  • 4つのフォトショップ基本テクニック / ウェブデザインライブラリー

    投稿日:2008年2月12日   レベル:初心者    ソフトウェア: このチュートリアルでは、フォトショップの基的なテクニックをまとめて紹介しています。 Step1 : 晴れ渡った空に雲を入れる方法 Step2 : 湯気を描く方法 Step3 : 写真に写っている邪魔な木を消す方法 Step4 : トンボを別の画像に合成する方法 雲ひとつない晴れ渡った空に雲を入れる方法を紹介します。 修正前の空が青いので、一旦青を抜き取る作業が必要になります。 多角形選択ツールや、なげなわツールなどで青空を選択して削除します。 次に、合成する空を比較(暗)で乗せてください。青空の抜き取り方はバージョンによっても色々違ってくると思いますが、一つの方法としては特定色域の選択があげられます。 枝葉のディティールが失われてしまう場合は墨版生成などで対応してください。 湯気の立ち込める料理物の撮影は困難を極める

    moqada
    moqada 2008/02/14
    雲をつける。湯気を描く。邪魔なものを消す。背景を変える。
  • Vista風ナビゲーションバーの作り方 / ウェブデザインライブラリー

    投稿日:2008年1月22日   レベル:初心者    ソフトウェア: Step1 : 新規ファイルを作成 Step2 : 480px × 30px Step3 : 角丸 Step4 : 色の設定 Step5 : レイヤースタイルを適用 Step6 : 上部を選択 Step7 : グラデーション設定 Step8 : 不透明度設定 Step9 : 一行選択ツール Step10 : 選択範囲を反転 Step11 : 光沢の設定 Step12 : ロールオーバー効果 Step13 : テキストリンク追加 Step14 : 完成

  • フォトショップ : カラー効果の使い方 / ウェブデザインライブラリー

    投稿日:2008年01月08日   レベル:初心者    ソフトウェア: Step1 : 画像を開く Step2 : 色相・彩度の変更 Step3 : 色相・彩度の変更結果 Step4 : レイヤーを新規作成 Step5 : ぼかしを選択 Step6 : 完成

    moqada
    moqada 2008/01/08
    彩度を下げることで使った色がはっきりわかるようになる