「Adobe Illutrator」を"Webデザむン"の珟堎に導入したいけれど「肝心の䜿い方がわからない!」ずお困りの方に向けお、Webデザむンに特化した基本的な䜿い方をお䌝えする本連茉。第4回目ずなる今回は、Illustratorの「効果」を甚いお、Webサむトには必須の「ボタン」の䜜成方法を玹介したす。

Webサむト䞊に配眮された「ボタン」は、その先にある情報に閲芧者を導くずいう非垞に重芁な圹割を持っおいたす。閲芧者が「ボタン」ずしお認識するこずができるのは最䜎条件ずしお、感芚的に「抌しおみたい」ず思わせるものにしたしょう。

■これたでの蚘事
【レポヌト】Illustratorで぀くるWebデザむン・入門線 (1)ワヌクスペヌスの最適化
【レポヌト】Illustratorで぀くるWebデザむン・入門線 (2)ペンツヌルの基瀎知識
【レポヌト】Illustratorで぀くるWebデザむン・入門線 (3)Webサむトのヘッダ䜜成

アヌトボヌドの蚭定

たず最初に、「新芏ドキュメント」りィンドりを開きたしょう。今回は玠材の制䜜ですので、「アヌトボヌド」の倧きさはボタンが収たる皋床で倧䞈倫なのですが、サむズ感が把握できるように、第3回で䜜成したヘッダヌず同じ、幅980pxにしおみたす。

幅:980px、高さ:500px

ボタンの圢状を決める

「ボタン」の圢状を決める際に、泚意する点がひず぀ありたす。Webサむトはデザむンを決めた埌に、玠材を配眮し機胜性を䞎えるなど、Webサむトずしお組み䞊げる「コヌディング」ず呌ばれる䜜業が埅っおいたす。「コヌディング」は基本的にピクセル単䜍で行う蚈算䜜業が䌎うので、サむト䞊の玠材はあらかじめ敎数の倀で䜜成しおおきたしょう。

ツヌルバヌの「長方圢ツヌル」を遞択し、「アヌトボヌド」䞊をクリックしたす。するず「長方圢」りィンドりが開くので、ここに幅ず高さを数倀で入力したす。あずでサむズを倉曎させる堎合は「倉圢」パネルで幅(W)ず高さ(H)を数倀入力し、やはり敎数倀を維持するようにしたしょう。

長方圢サむズを数倀入力

今回は「幅:200px、高さ:50px」の長方圢にしおみたす。入力した埌にOKボタンをクリックするず、アヌトボヌド䞊に「幅:200px、高さ:50px」の長方圢が珟れたす。数倀は「情報」パネルたたは「倉圢」パネルで確認できたす。

メニュヌバヌにある「効果」の䞭の「スタむラむズ」を遞択し、「角を䞞くする」を遞択するず、長方圢の角に䞞みを加えるこずができたす。せっかくなので、䜿っおみたしょう。りィンドりが開いたら「半埄:10px」ずしおみたす。プレビュヌにチェックを入れるず、決定する前にアヌトボヌド䞊で確認ができたす。「ボタン」の角が䞞くなりたした。衚瀺が芋にくい時は、ツヌルバヌの「ズヌムツヌル」で自由にズヌム、(Altキヌを抌しながら)ズヌムアりトができたす。

数倀入力でサむズを蚭定した長方圢

角を䞞くする

配色を決める

次にボタンの色を決めたす。色はツヌルバヌ䞋郚の「塗りボックス」、「線ボックス」で蚭定したす。「ボタン」は独立した䜜品ではないので、Webサむトの党䜓的なバランスず調和する色を遞択したしょう。

今回は立䜓的で矎しい「ボタン」にするため、塗りは「グラデヌション」を䜿っおみたしょう。「塗りボックス」を手前にした状態で、その䞋の「カラヌ」/ 「グラデヌション」/ 「なし」の䞭から「グラデヌション」を遞択したす。

塗りを「グラデヌション」にする

画像塗り:グラデヌション

続いお、グラデヌションの色を決め、色が倉化する方向を蚭定したす。たず色を蚭定するには、「りィンドり」の「グラデヌション」パネルを開きたす。Photoshop CS6では先ほどの「グラデヌション」の行皋で自動的に右偎の「グラデヌション」アむコンから衚瀺されたすが、開かなければ同様に「りィンドり」から開きたしょう。

今回のグラデヌションは「皮類:線圢」を䜿いたす。色の倉化の方法は別の方法で行うので、ひずたず「角床」も「0床」のたたで結構です。数倀で入力したい堎合には、こちらで入力できるので芚えおおきたしょう。色はこの段階では「グレヌスケヌル」の巊偎「癜(K(黒の倀):0)」から右偎「黒(K:100)」ずなっおいたす。色数は䞡端の2色に挟たれた間の、適圓な䜍眮をクリックするず远加するこずができたす。削陀の際は、ドラッグで遠ざけるず削陀が可胜です。

それではたず、右偎の「黒」を倉曎したす。「グラデヌション」りィンドりの䞭の右偎「黒」を瀺しおいる「グラデヌションスラむダヌ」をダブルクリックするず、新たに色を蚭定するりィンドりが開きたす。たずはこちらのりィンドりから右䞊のリストボタンをクリックし、色調を「グレヌスケヌル」から「RGB」に倉曎したす。これでRGB色の遞択が可胜ずなったので、色を決めたしょう。

グラデヌション色の蚭定

グラデヌションの色が完成

続いお、蚭定したグラデヌションの色が倉化する方向を決めたしょう。前述の様に「グラデヌション」パネル䞊で数倀入力するこずも可胜です。今回は、より感芚的に方向を決められる方向をご玹介したす。方法は簡単で、ツヌルバヌの「グラデヌションツヌル」を遞択したす。こちらを䜿っおボタンの䞊を適圓にドラッグしおみたす。先ほど色を蚭定したグラデヌションの方向が倉曎できたした。Shiftキヌを抌しながら垂盎、平行にドラッグするこずもできたす。

「ボタン」の倖枠ずなる線の色も忘れおはいけたせん。「線ボックス」に切り替え、必芁があれば線の色も倉曎しおみたしょう。「りィンドり」の「スりォッチ」パネルや「カラヌ」パネルを䜿うず良いでしょう。必芁があれば「線」パネルで線の倪さも倉曎しおみたしょう。CS6から進化した郚分ずしお、線の郚分にも「グラデヌション」が䜿える様になりたした。これたでは線を䞀床「分割・拡匵」しおから加工するずいった面倒な䜜業があったのですが、その手間が省けお非垞に䟿利になっおいたす。

グラデヌションの方向を蚭定

線の色も蚭定