テクニック

WEBデザインの品質をあげるテクニック集です。クオリティを上げるための技術やヒントをご紹介します。

Back Number

フリー素材でサイトを作る グローバルナビ編

2012年04月05日
フリー素材でサイトを作る グローバルナビ編

今回はフリーのアイコン素材を使って、ショッピングサイトのグローバルメニューをつくります。

03

2012年07月17日
写真素材がない時のデザイン方法 キービジュアル編

今回は、素材がない時のデザイン方法を、キービジュアルをデザインする場合に絞って考えてみたいと思います。

02

2012年09月11日
写真に関しての「困った」を解決!~ サイズが小さい・解像度が低い場合 ~

入稿された写真素材のサイズが小さい・解像度が低い!そんな時のデザイン対処方法です。

01

2012年11月08日
フリー素材でサイトを作る タイトル・見出し編

グローバルナビ編の続編!簡単で見栄えのする見出しを作りましょう。今回はいくつかパターンをご紹介します。

index_img

2013年08月09日
テイストや雰囲気の作り方 ~前編~

デザインを作る上で、必要となってくるのがテイストです。見た目も雰囲気もとても左右される大切な内容です。今回は、テイストの作り方についてご説明します。

index_img

2013年08月09日
テイストや雰囲気の作り方 ~後編~

デザインを作る上で必要なテイストについて、今回は後編としてテイストの作り方を実践的にご説明します。

初めてでもできる!ペンツールを使ってお絵かき ~描き方編~

2013年08月16日
初めてでもできる!ペンツールを使ってお絵かき ~描き方編~

初心者にとってとっつきにくいペンツール。思い通りに描けないという方もこれを読めば、きっと使いこなせるはず!

pen

2013年08月19日
初めてでもできる!ペンツールを使ってお絵かき ~調整編~

初心者にとってペンツールは、どう使えばいいか悩むところではないでしょうか? なんとなく線は引けても、思い通りに描けないと…

index_img

2013年08月22日
絵心がなくても描ける! トレースから作るイラスト

ペンツールの使い方をある程度マスターしたら今度は、トレースをしてましましょう。今回は、写真をトレースしてイラストにします。

index_image

2013年08月26日
作り方のコツを伝授! 実例で学ぶロゴデザイン

今回は時間をかけずに作成するロゴの作り方をご紹介します。例としてWebサイトのロゴの作り方をまとめました。

イラストレーターで実現! 手書き風イラストの描き方

2013年08月28日
イラストレーターで実現! 手書き風イラストの描き方

今回はイラストレーターの効果を使って、手書き風のイラストにチャレンジ。ちょっと手を加えるだけでデザインに温かみがでてきます。

簡単ロゴデザイン 悩まず作るコツとポイント

2014年02月07日
簡単ロゴデザインVol.1 悩まず作るコツとポイント

作る時に悩んでしまうのは、作り方のルールを知らないからなのかもしれません。そこで今回は、悩まずロゴを作れるポイントをご紹介します。

テクニック一覧ページを見る

Special 特集

catch_balloon

2018年11月13日
【フリー素材】手書きふきだし素材スペシャル Ver.1

今回は3種類の手書きのふきだしです。シンプルで幅広く使えるので、制作物のちょっとしたアクセントにどうぞ。ふきだしの手書き…

Interview インタビュー

index

2014年10月15日
イラストレーターを目指し活動中!~後編~

※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。 学校で広告を学び、色々やってみたくなった。 ─ …

Seminar セミナー

短時間で学ぶInDesign初心者講座
2018年11月20日(火) 16:00-18:30

デザイン

InDesign

Technic テクニック

catch_file_034

2018年11月06日
Photoshopブラシを使った簡単な雲の描き方

写真やイラストに雲を描き足したいけど、どうやって描くのか分からない… そんなお悩みに答えます! Step1 雲を描く下準…

Books オススメ書籍

レイアウト、基本の「き」

2018年08月28日
レイアウト、基本の「き」
  • デザイン

デザイン初心者向けのレイアウトの本 初歩的なレイアウトの基礎を 理論的なしっかりとした説明を元に、豊富な図案で説明 全部…

Award アワード

「海の日」ポスターコンクール
2018年12月5日(水) 締め切り

イラストレーターの機能の一つ「シンボル」。普段あまり使わない方も多いのでは?
実はこの機能、活用しない手はないくらいとっても便利なんです。
web制作にも持ってこいの優れもの、さっそく見ていきましょう!

Step1 シンボル機能とは

シンボルは、ドキュメント上で繰り返し使用することができるオブジェクトのことです。
シンボル機能を使用することで、同じオブジェクトのコピーを複数配置することが可能です。
また、データ量が軽いのでファイルサイズを削減することもできます。

…確かに便利そうではあるけれど、分かるようで分からない!
ということで次のStepから、この機能のメリットを画像で解説していきます。

Step2 シンボル機能のメリット

①容量が軽くなる

制作中に同じ画像をたくさん配置すること、ありますよね。そんな時こそ、この機能の使い所です。
例として、草むらのイラストで考えてみます。
この草を一つずつ複製した場合、すればするほどデータは重くなり、動作が遅くなっていきます…
しかし!シンボルに登録してから配置すると、配置したという情報だけになるため、データは一個分のみになり快適に!!!

②置き換えができる

たくさん配置したものを別の画像に置き換えることも、シンボルなら朝飯前。
ピンクのうさちゃんを、ブルーのうさちゃんに置き換えました。
ちなみに、ピンクうさぎのデータ自体をブルーに直接修正するやり方もあります。その方法はStep3のシンボルの編集・修正にて。

③保護できる

作業中、せっかく作ったパスを動かしてしまった経験ありませんか…?
シンボルに登録しておけば、こんなうっかりハプニングも防止できます!

シンボル機能のメリット、お分かりいただけたでしょうか?
いよいよ、この機能を使ったイラストの実例を見ていきます。

Step3 シンボル機能の使い方

まずはシンボルパネルを開いてみましょう。

ウィンドウからシンボルを選択
シンボルパネルを開いてみましょう。

柄やパターンに活用してみよう!

元々登録してあるシンボルを使ってパターンを作り、服の柄を作ってみます。

シンボルライブラリメニューアイコンをクリック
シンボルカテゴリから好きなジャンルを選ぶ
使いたいシンボルをクリック

シンボルスプレーツールで選んだシンボルを配置する

シンボルリサイズツールなどで大きさや明度を変更できますよ!

シンボルを置き換える場合
置き換えたいシンボルをクリック
シンボルライブラリで置き換えるシンボルを選択する

[シンボルを置換]をクリックで置き換え完了!

シンボルを編集する場合
シンボルに登録したデータを使って直接一括編集するので置き換える手間は省けますが、最初に登録したデータは消えてしまうので注意!

シンボルパネル内のシンボルまたは配置したシンボルをダブルクリックし[シンボルを編集]をクリック
編集し終わったら、何もないところでダブルクリック!で完了

まぁ、なんて簡単なんでしょう!一括修正ができるので便利ですね!
このシンボルツールを使えば、こんな複雑な洋服の模様も簡単に描けちゃうんです!
これは何かと使える予感がしますよ…!

Step4 イラストにシンボル機能を活用してみる

装飾に使う時に

カーテンなどの裾に、飾りタッセルを大量につけることもできます。
そう、シンボル機能ならね。
調子に乗って少々つけすぎた感がありますが、これはシンボルでないとなかなか難しい芸当。

似たイラストをたくさん使う時に

鳥さんだって、いっぱいとまってくれます。

上のように、部分を少し変えたイラストを使用したいときには、シンボルを複製してから編集します。

記事担当者のコメント
シンボル機能の魅力、お分かりいただけましたか?集中しているとついデータを重くしてしまいがちという方は、ぜひお試しあれ。元々登録されている素材も多いので、作業が捗ること間違いなしです。