チュートリアルWebサイトに欠かすことのできないボタン。ボタンのできの良し悪しで、クリック率が大きく変わることもあります。Photoshop」で紹介された、ボタンのチュートリアルを和訳してご紹介します。このチュートリアルに沿って制作すれば、1ピクセルまでこだわったボタンを簡単に実現できますので、今後の制作にとても重宝すると思います。木のテクスチャのダウンロードアイコンのダウンロードスポンサーリンクSTEP1:Photoshopで木のテクスチャを開いてください。最初に木のテクスチャをダウンロードしてから、ダウンロードしたファイルをPhotoshopで開いてください。1024×768ピクセルの画像サイズで、背景として使用します。STEP2:ボタンの背景を作る。ボタンは2つのパーツで構成されています。:透明な表面のボタンと、メインボタンのようになるボタンの背景です。メインのボタンは木の背景に見事に調和した、緑のグラデーションを使用しています。×80pxの白い図形を描きます。素晴らしい大きなボタンが表示されます!シェイプレイヤーをダブルクリックして次のレイヤー効果のオプションを追加していきます。光彩(内側)を追加して形状を作成し、シェイプの不透明度を25%にします。前半のボタンは下記の様になります。角丸長方形ツール(U)を選択し、半径30pxの340×60pxの図形を描きます。その図形を、最初に描いた図形の真ん中に配置して、マージンが10pxになるようにします。次のレイヤー効果を追加してレイヤーを綺麗にしていきます。ボタンの土台ができ上がりました。最後の仕上げチュートリアルの最初にある「必要な材料」から、アイコンをダウンロードしてください。Photoshopで36×36pxから24×24pxにリサイズして配置します。tutorial」というテキストを配置します。500」というフリーフォントを使用します。以上で完成となります。いつも同じようなデザインになってしまいがちなボタンですが、こういうチュートリアルを一つずつこなして、ボタンデザインの引き出しを増やしておきたいものです。レイヤースタイルを巧みに使ったテクニックですので、チュートリアルが終わった後レイヤースタイルを登録しておけば、簡単に使いまわすことができます。当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。ブログの内容が気に入って頂けましたらRSSリーダーの登録よろしくお願いします。PostsiPhoneを描いたPSDファイル20個iPhone対応のサービスを始めた時などに、PCサイト上でのサービス案内ページ等で使えそうです。»Photoshop好き必見。»フリーで使える高解像度のPhotoshopブラシ100+デザイン制作に役に立つPhotoshopのブラシを100種類以上掲載しているサイトをご紹介します。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【無料】漢字もOKの日本語フリーフォント/毛筆体・手書き風など【無料】漢字もOKの日本語フリーフォント/明朝・ゴシック・丸ゴシックWindows上でXAMPPを使用してローカルにバーチャルホストを設定する方法Mac上でMAMPを使用してローカルにバーチャルホストを設定する方法WordPressの本番環境をローカル環境で再現する方法5ステップでマスターする!初心者から始めるWordPress勉強法ローカルサーバーをXAMPPで構築してWordPressをインストールする方法Photoshopで継ぎ目のないテクスチャの作り方ファーストビューが大事なのは知っている。素材profileかれこれ十年以上デザインに関わる仕事をしています。今ではWebデザインを中心に、ディレクションやライティングなどをしています。TwitterではWebに関する情報を中心に個人的な気になる話題を気ままにつぶやいています。