絵心が無い人が簡単なグラフィック素材を作るのに役立つ記事8選Webサイト作成手順を勉強するまとめ(終)(2/2 ページ)

» 2014年05月23日 18時00分 公開
[岡本紳吾hatte.Inc]
前のページへ 1|2       

【ステップ4】パスの「ブレンド」で等間隔にシェイプを並べる

 Illustratorを活用している方なら、パスとパスの間の形を生成させてデザインに活用することがあるだろう。Fireworksもベクターを扱えるツールなので、パスの「ブレンド」を利用できる。

 ブレンドというのは、指定された2つのパスの形の中間の形を生成することで、「直径50pxから10px刻みで7個の円を描いて……」といった場合でも、始めと終わりの円を作ってブレンドすれば、わざわざ何個も円を描いて整列させる必要もなくなるのだ。

 形を変えずに位置だけ変えてブレンドし、画面上に等間隔にシェイプを並べるというテクニックもある。

中間パスを個々のパスオブジェクトとして描画します(Fireworks入門第4回 ブレンド機能でデザインの幅を広げよう!(Adobe Pinch In)より引用)

【ステップ5】「ストローク」で手書き風のタッチを与える

 デザインに手書き風のタッチを与えたいとき、どうすればいいだろうか? Fireworksなら「ストローク」の編集が役に立つだろう。

 Fireworksで線を描くとき、その線の太さや色だけではなく、点線にしたり、テクスチャを持たせたり、太さなどをランダムに変えたりと、カスタムストロークで自由に設定できる。

 設定次第では線ではないものができたりするのだが、それほどに強力なツールであるがゆえである。使いこなして意図したストロークを作り出すのもいいが、ランダムをうまく活用して生成されるパターンを試行錯誤するのもいいだろう。

【ステップ6】「スライス」で作成したパーツをCSS3として出力

 Fireworksを活用できるようになったら、それをコードに落とし込んでいく作業もマスターしておこう。

 Fireworksでは「スライス」という機能で、パーツを書き出ししていくことができる。「スライス」はスライスツールで作成するのだが、数が多いと非常に面倒な作業だ。しかし、それも簡単に設定できる機能が用意されている。

 また、シンプルなグラフィックであれば、CSS3で出力することもできる。角丸ボタンをCSS3でゼロから書くのはちょっと面倒だが、Fireworksであればすぐに作ることができるので、CSS3にしてWeb制作に活用できる。

【ステップ7】逆にCSSでグラフィック素材を作ってみよう

 Web制作では、要件によって「グラフィック要素を使いたくない」という場合があったりする。容量的な問題ももちろんだし、Webフォントを活用したいとか、後々CSSだけでメンテナンスしたいとか、そういった事情からだ。

 Fireworksに頼ってグラフィックを作っていると、このような要件が突如現れた時、慌ててしまうことだろう。しかし、CSSを組み合わせてボタンなどを作れることを知っておけば、応用を効かせてさまざまな要素を作っていくことができるだろう。

 また、ちょっとした影の使い方などはFireworksでの制作に逆輸入してもいいだろう。

モックアップやワイヤフレームも作れる

 今回はFireworksを中心とした、グラフィック周りの記事を紹介した。筆者も絵心は無いのだが、Fireworksのおかげでちょっとしたパーツなら作ることができるようになって、現場でも活用してきた。今でも急ぎでグラフィックを描かなければならない事態が発生したとき、真っ先に起動するアプリケーションとなっている。

 FireworksはWeb制作におけるさまざまなシーンで活用されている。今回紹介したグラフィック制作はもちろんだが、モックアップを作ったり、ワイヤフレームを作ったりする際にも活用されている。

 職種的にグラフィックを作る機会が無い人でも、Fireworksを使う機会は十分あるので、マスターしておいて損はないだろう。ぜひ、マスターして、活用してほしい。

他にもWebデザインに役立つ記事を読みたかったら

 さて、今回で新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを紹介する本連載はいったん終了だ。これまでの連載で紹介した記事や、紹介しきれなかった記事は「Adobe Pinch In」でまとめて読めるので、興味を持った方は参照して学んでみてはいかがだろうか。

岡本 紳吾(おかもと しんご)

1975年大阪生まれ。2000年ごろよりAdobe Flash(当時はmacromedia)を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter:@hage、Facebook:shingo.okamoto


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。