PhotoshopでWebデザイン

フォームを作る

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームを作成します。
講師:
06:11

字幕

では最後にメール送信用のコンタクトフォームを作成していきたいと思います。では Contact ページを見えるようにしてこのフォルダを開けておきます。他のページはすべて隠しておきましょう。「シェイプツール」の「長方形」に持ち替えます。ドキュメント上をクリックしてサイズを「100px×35px」としたいと思います。最低でも 35 ピクセルくらいあるとどのデバイスからでも、わりと指でも押しやすいサイズになっています。では、色を変えていきましょう。まずは白い色を選びます。この後に、これをガイドに沿わせて左側に配置してCtrl/Command+T で横幅を少し伸ばします。では、ここに文字を書いていきましょう。「テキスト」のツールに持ち替えてここにまずは Your Name ですね。メールの名前を書いてもらいます。少し小さいのでこれを 18px くらい18pt くらいに変更します。ここにぴったり配置してこれを一つのセットにします。Shift を押しながらYour Name のテキストと長方形を選択してCtrl/Commad+G でグループ化します。これを複製していきたいのでCtrl/Commad+Jこれを、今度は画面上で Shift+↓1、2、3、4、5とします。 そうすると、Shift+↓1回で 10px 動くので今、5 回押して50px 下に移動しました。では移動したこのレイヤーをCtrl/Commad+J で複製してさらに、Shift+↓1、2、3、4、5と押します。これを繰り返して4つの箱を均等に配置します。その後にテキストを書き換えていきます。名前の次はEメールを聞きましょう。Your Email次にEメールの Subjectタイトルですね。次に、一番最後はYour Message と本文を書いてもらいましょう。Message に関してはより幅が大きい方がいいのでこの四角を選択したらCtrl/Commad+T でサイズを拡大していきます。こんなものですかね。最後に送信ボタンが欲しいですよね。では、別のページからボタンだけもらってきたいと思います。まずはこの Contact のページを隠してHome のページを出します。ここにMORE INFO のいいボタンがあるのでこれをCtrl/Command+J で複製したらそのままフォルダごとContact のフォルダに移動します。そしたらこの Home のフォルダをたたんでしまって隠しておきます。 もう一度このContactのフォルダを見えるようにするとボタンがあります。ではここで SUBMIT送信ですね。少し文字を大きくしましょう。Boldで18 ぐらいですかね。この方が見やすいですね。場所を微調整します。こんな感じに、送信ボタンとコンタクトフォーム、作ることができました。あとはここに CONTACT US というタイトルが欲しいですね。ヘディングが欲しいです。「テキストツール」に持ち替えてこの辺りにクリックCONTACT US とします。全部選択してもう登録してあるので「パラグラフ」の「段落スタイル」を開いたら「H1」これにしてあげます。そうすると他のページと同じH1のスタイルを持つことができます。こんな感じにすると簡単にコンタクトフォームを作成できました。少し場所を整えましょうか。全体のこのコンタクトフォームを上に移動したいと思います。もう少しこのMessageもう少し横に広げた方がいいかなと思います。なので、そのグループを選択して中に入っている長方形を選択してCommand/Ctrl+T でやっぱりもう少し伸ばしましょう。これくらいあっても良いんじゃないかなという感じですね。 ボタンですね、SUBMITボタンはもうちょっと右の方に移動しましょうか。Contact はついてこなくて大丈夫です。これは別の場所に置いておきましょう。Shift+→ でもう少し具合のいい場所を探していきます。こんな感じですかね。Contact のページを作成することができました。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。