現在は状況が異なる可能性がありますのでご注意ください。3日目の講義ではちょっとしたボタンを制作したのですが、テキストに載っていたボタンがちょっとおかしな感じだったので、反射光に関して簡単に説明してから、反射光を取り入れたボタンを制作しました。テキストの最後にボタンの作り方が載っていたのですが、なんだかちょっとおかしいですね...なぜおかしいのでしょうか。電球マークは光源、オレンジの矢印は光線を表すものとします。著者の方はボタンには上から光があたっているものと考えて、このようなボタンにしたのではないでしょうか。デフォルトのグラデーションが白から黒なので、このようにしたのかもしれません。このような光の当たり方は、現実世界ではありえません。(たとえ太陽光などの入らない密室でも、壁や床に光が反射する場合があるため)もっと身近な例で考えようちょっと話が難しくなってきたので、身近な例で考えてみましょう。この教室で、「蛍光灯などの照明を全てオフにして、窓から差し込む光のみがある」という場合を考えてみましょう。ここで、教室の中央に立っている青い女性が窓の方を見たとして、壁や窓の明るさはどのようになっているでしょうか。想像してみてください。太陽の光が当たっていないからといって、壁が真っ黒になるほど暗いということはありえないですよね。実際には、壁にもそれなりに明るさがあるはずです。適当ですみませんが、実際にはこういう風に、光が直接当たっていない壁にもある程度の明るさがあるはずです。それはなぜかというと、床や壁に太陽の光が反射しているからですね。「光を反射する」というと、鏡や水面のようなものを思い浮かべるかもしれませんが、現実には壁、床、机、服、その他さまざまなものが光を複雑に反射しています。「光源上からだけ当たるのではない」ということです。smith例えば、デッサンの入門書を読むと、大抵の本は最初にりんごを描くことを薦めています。リアリティのあるりんごを描くために、反射光を描くことを薦めています。このりんごも、よく見るとテーブルの反射光が右下に入っていますね。色々なサイトを見て、反射光を取り入れたグラデーションが使われていないか探してみましょう。反射光を取り入れたボタンを作ってみましょう。使って反射光を取り入れたボタンを制作しました。いつもはブログには具体的な制作方法までは書いていないのですが、ここで終わるのも投げやりな感じがするので具体的な制作方法を書いておきます。ダウンロードして制作してみてください。読み替えていただけると幸いです。Ctrl+N(新規ファイルの作成)を押します。左下と右下にある「command」キーを押しながら「N」キーを押すことを指します。画面右側にある「レイヤー」パレット内の「背景」部分をダブルクリックします。キーを押してください)「描画色」をクリックします。1「塗りつぶしツール(バケツのようなアイコン)」をクリックしてください。ここに、塗りつぶしツールがない場合は、「グラデーションツール」をマウスクリックで長押しすると塗りつぶしツールが出てくるはずです。2カンバス上でクリックすると、濃いグレーに塗りつぶされます。1「長方形選択ツール」をクリックします。2画面上のオプションバーにある「スタイル」の横のドロップダウンリストをクリックし、「固定」を選びます。ボタンを制作しますので、幅に「100px」高さに「40px」と入力します。カンバスの中心よりやや左上のあたりでクリックします。キーを押して表示させます。定規の上でドラッグ開始し、下にドラッグすると水色の「ガイド」とよばれる線が出てきます。それをそのまま選択範囲の端に2本ドラッグします。5同様に、左の定規から選択範囲の端にも2本ドラッグします。1ツールバーの「長方形ツール」をクリックして長押しし、2「角丸長方形ツール」をクリックします。13つボタンが並んでいるうちの1番左(シェイプレイヤー)をクリックし2丸みを「4px」に指定し3選択範囲の左上から右下に向けてドラッグします。レイヤーパレット内の「シェイプ1」の右側あたりをダブルクリックします。1グラデーションオーバーレイ(チェックボックスではなく文字の上)をクリックします。(もし、ドロップシャドウや境界線など余計な項目にチェックが入っていた場合は外します)2グラデーションの色の上の部分をクリックします。1右下のカラー分岐点をクリックします。2カラーをクリックします。青い矢印のあたり(グラデーションのすぐ下の何もない箇所)をクリックします。すると、赤い丸で囲まれたような、黒い印(カラー分岐点)ができたはずです。できない場合はもう1度クリックしてください。余計な黒い印(カラー分岐点)ができた場合は、それを下にドラッグすると消えます。青い矢印のあたり(グラデーションのすぐ下の何もない箇所)をクリックします。黒い印(カラー分岐点)ができたら、カラーをクリックします。左下の黒い印(カラー分岐点)をクリックし、カラーをクリックします。こんな感じになったでしょうか。色がおかしいなどという場合は、この項目を見直してみてください。位置に「50」と入力します。同様に、右から3番目のカラー分岐点をクリックします。位置に「49」と入力します。こんなグラデーションになったでしょうか。次に、「ドロップシャドウ」の文字の上をクリックし、図のように設定します。1次に「光彩(内側)」の文字の上をクリックし、図のように設定します。キーを押すと、このようになったはずです。キーを押し、メニューの「表示>表示・非表示>ガイド」をクリックします。するとこのようになるはずです。テキストツールをクリックし、オプションバーでArialRegular18pxシャープ白(#ffffff)にします。キーを押して確定します。移動ツールで、文字をボタンの上に移動します。1テキストツールをクリックします。2文字の上でダブルクリックします。3テキストカラーを#「632e02」に設定します。レイヤーの右あたりをダブルクリックします。「ドロップシャドウ」文字の部分をクリックし、図のように設定します。1移動ツールをクリックします。2Ctrlキーを押しながら、「Home」レイヤーと「シェイプ1」レイヤーをクリックして選択状態にします。3垂直方向中央揃え、水平方向中央揃えをクリックします。キーで保存したあと、グラデーションの色を変更して、違う色のボタンを作ることにチャレンジしてみましょう。ドロップシャドウなどの値を調節して、どのような変化が起きるか見てみましょう。これを15分以内に作れるよう挑戦してみましょう。追記ボタンのグラデーションを考える上で、こちらの記事も参考になると思います。コリススマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。デザインAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。・WordPressプラグインの使い方を知りたい方Photoshopの「覆い焼き」や「なげなわ」って何?という話Photoshopを初めて使う方にとって、効果がわかりにくいツールはたくさんあると思います。...2020年1月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。