タグ

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

  • 「About Us」ページに記載すべき7つの項目 / ウェブデザインライブラリー

    投稿日:2011年1月7日   レベル:−    ソフトウェア:− このチュートリアルでは、「About Us」ページに記載すべき7つの項目をご紹介します。 Step1 : はじめに Step2 : ブランド名を記載する Step3 : 画像を配置する Step4 : 一人称を使う Step5 : ユーザーのニーズや要求について記載する Step6 : 内容を常に更新する Step7 : はっきりとした、説得力のある言葉を使う Step8 : リンクボタンを設置する About Usページは最も重要な事項であり、多くのウェブサイトで上位階層に配置されています。 しかし、その当の重要性を理解せずに会社の歴史や組織といった面白みに欠ける文章を連ねているものが多く見受けられます。 インターネットが顧客との接点として不可欠なものとなりつつある中で、ウェブサイトのAbout Usページは簡単で効率

  • テキストを燃やす / ウェブデザインライブラリー

    投稿日:2006年7月11日   レベル:初級    ソフトウェア: このチュートリアルは、今まで、燃えるようなテキストを作ったことのない初心者のためのものです。とても簡単な技術で、一般的なPhotoshopのツールを使って作ることができます。 ドキュメントに白でテキストを記述してください。背景は暗い色にするほうがより良いです。 ここでは、#000000を使いました、つまり”真っ黒”です。 テキストの形状は特に気にする必要はありませんが、かなり特殊なものは避けた方が無難でしょう。ここでは、”Eras Bold ITC”を使います。 Arial Black、VerdanaやBerlin Sans FBなども良いと思います。太目のフォントが良いでしょう。 カラーバランスレイヤーを次のように設定してください。 フォントレイヤーを複製して、ラスタライズしてください。実際は、コピーは必要ないのですが

  • Photoshopでクールな効果をつける方法 / ウェブデザインライブラリー

    投稿日:2010年02月09日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopでクールな効果をつける方法を紹介します。 Step1 : はじめに Step2 : 背景にもう少し色を加える Step3 : 背景に要素を加える Step4 : モザイクを適用する Step5 : テキストを加える Step6 : 全体を明るくする Step7 : 完成

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

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

  • Photoshopで宇宙を創造する方法 / ウェブデザインライブラリー

    投稿日:2009年11月13日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopで宇宙を作ってみたいと思います。 Step1 : 星を作る Step2 : 星雲を作る Step3 : 惑星を作る 次のステップに沿って背景にほのかに輝く星を作ります。 モノクロのノイズを作ります。 「イメージ」−「色調補正」−「明るさ・コントラスト」を設定します。 最初のステップを繰り返します。 「明るさ・コントラスト」の操作を繰り返し、 上記・下記の二つのステップを6〜8回くらい繰り返すと程よい密度で物に近い星空ができます。 背景が黒の新規レイヤーを作成して雲模様のフィルタを加えます。 「フィルタ」−「描画」−「雲模様」を選択します。 前景と背景の色が白黒で無の空間のようなコントラストがついているかを確認します。 「Ctrl」+「F」キーを押してフィルターを複数回かけて

  • Photoshopで封印を作る方法 / ウェブデザインライブラリー

    投稿日:2009年11月17日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopで封印を作ってみたいと思います。 Step1 : はじめに Step2 : レイヤーを結合 Step3 : ドロップシャドウを追加(1) Step4 : ベベルとエンボスを追加(1) Step5 : カラーオーバーレイを追加 Step6 : 円形のシェイプを描く(1) Step7 : ドロップシャドウを追加(2) Step8 : 光彩(外側)を追加(1) Step9 : グラデーションオーバーレイを追加(1) Step10 : 円形のシェイプを描く(2) Step11 : ドロップシャドウを追加(3) Step12 : シャドウ(内側)を追加 Step13 : 光彩(外側)を追加(2) Step14 : 光彩(内側)を追加 Step15 : グラデーションオーバーレイを追加(

    cosmetick
    cosmetick 2009/12/15
    封蝋の作り方
  • Photoshopで本物の写真をマンガに出てくる写真に変える方法 / ウェブデザインライブラリー

    Home > フォトショップ講座 > Photoshopで物の写真をマンガに出てくる写真に変える方法 Photoshopで物の写真をマンガに出てくる写真に変える方法 投稿日:2009年09月29日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopで物の写真をマンガに出てくる写真に変えてみたいと思います。 Step1 : はじめに Step2 : 画像を明るくする Step3 : 輪郭効果をつける Step4 : 完成

  • Photoshopでリアルな水のテクスチャを作る方法 / ウェブデザインライブラリー

    投稿日:2009年12月1日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopでリアルな水のテクスチャを作ってみたいと思います。 Step1 : はじめに Step2 : 描画色・背景色の変更 Step3 : 雲模様を追加 Step4 : クロムを追加 Step5 : 完成 これは、Photoshopでいくつかのフィルターだけを使って、すばらしいテクスチャを作る短いチュートリアルです。 この水のエフェクトを作るのには、基的に2つのフィルターを使うだけです。 もちろん、望む見た目のテクスチャを一度手に入れたら、さらにアイデアを取り入れて、 あなた自身のテクスチャを作ってみると良いでしょう。 このテクスチャは次のステップを使って作ることができます。 Photoshopで新しいドキュメントを開き、あなたが必要するサイズをセットしてください。 私は、500px

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

    投稿日:2009年12月4日   レベル:中級者    ソフトウェア: このチュートリアルでは、Photoshopでミニレイアウトを作ってみたいと思います。 Step1 : はじめに Step2 : 塗りつぶす Step3 : タイトルなどを追加 Step4 : 文を追加 Step5 : 完成

  • Photoshopでペンツールを使って切り抜きや選択範囲作成をする方法 / ウェブデザインライブラリー

    ペンツールもしくはフリーフォームペンツールのいずれを使っても構いません。 違いはペンツールの場合、アンカーポイントをいつ置くかを自分自身で決めるのに対し、 フリーフォームペンツールではどこにアンカーポイントを置くのが一番良いかをツール自体が推測してくれるという点です。 (例えば、マグネットのオプションを使用して設定を変更することも可能です。) まず、フリーフォームペンツールを使ってみましょう。 見やすいように拡大をしても構いませんが、画像全体が見えている状態を保ってください。 (そうしないと、特にマグネットを使用している場合は線を描くのが難しくなります。) 顔の輪郭に沿って線を描くように心がけてください。マグネットを選択した方がやりやすいでしょう。 画像の端の部分は、ペンツールできれいに選択できなくてもあまり気にしないで構いません。 後で簡単に選択部分を追加することができます。 ここでペン

    cosmetick
    cosmetick 2009/12/15
    パスについて
  • Fireworksで徐々に消える画像を作る方法 / ウェブデザインライブラリー

    投稿日:2009年12月15日   レベル:初心者    ソフトウェア: このチュートリアルでは、Fireworksで徐々に消える画像を作ってみたいと思います。 Step1 : はじめに Step2 : お好みの画像を開く Step3 : 長方形で画像を覆う Step4 : グラデーションをかける Step5 : マスクとしてグループ化する Step6 : 完成 このシンプルな記事は、あなたが徐々に消えていくエフェクトを画像に加える手助けになります。 私たちは、徐々に消えていくエフェクトをマスキングと呼んでいます。 普段あなたがWebページをデザインする時、このようなエフェクトを使った画像を加えたくなるかもしれません。 Webページに画像を加えたいとき、そのページの背景色を使ってうまく修正したら、うまくいくでしょう。 背景色を使った修正は、ページにプロフェッショナルな見た目を与えます。 こ

    cosmetick
    cosmetick 2009/12/15
    マスキングについて
  • Photoshopでページの端を丸める方法 / ウェブデザインライブラリー

    投稿日:2009年02月06日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopでページの端を丸めたようなテクスチャを作ってみたいと思います。 Step1 : はじめに Step2 : 選択範囲を指定したままパスを作成する Step3 : パスを解除しグラデーションツールを使う Step4 : 完成

  • 1