イラストレータでデザインをやってみましょう
Here is a look at what we will be making:
I have this problem every time I go grocery shopping: whenever I go down the cereal isle it takes me forever to pick out a box to buy. I’m so wrapped up in looking at the box design, especially those super tasty display logos! The other day I was caught staring at the new box of Lucky Charms drooling, not over the thought of marshmallowy moons and clovers, but over the beautiful new logo. So I set out to make one of my own in Adobe Illustrator. In the process I came up with some quick and easy techniques that look great! I am pleased to share them with you here.
If a real cereal logo designer happens by here, please give us insights!
I am using a Mac, and in this tutorial I will add shortcut commands, such as (cmd-F) for Paste in Front. PC users just substitute (ctrl) for (cmd) in most cases.
Step 1: Grab the Font
First thing to do is get a font to use. One great place to get free or buy quality fonts is from myfonts.com. The FREE font I grabbed for this tutorial is called Mail-Ray-Stuff
Step 2: Type the Name
Using your new font, type out the name of your product.
Then separate and modify each letter following these steps:
- Select the text
- In the Menu, go Type > Create Outlines.
- Right-click the text and select Ungroup (cmd-G).
- Using the Selection Tool(V) rotate, nudge and reposition each letter just slightly, to make the text look more active.
Step 3: Create a “Plaque” for the Word to Display on
Now we need to make a big outline for your letters following these steps:
- Select the letters and group them up again by right-clicking > Group or (cmd-G).
- Copy it, and Paste Behind (cmd-B).
- Using the Stroke Palette, give it a big stroke, any color, and aligned to the center.
Lock the original text for now, by selecting it and going Object > Lock > Lock Selection or (cmd-2).
Then follow these steps:
- Select the outlined text
- Go Object > Expand
- Right-click the text and select Ungroup (cmd + shift + G)
- In the Pathfinder Palette choose Add to Shape Area
- Click Expand (note to CS4+ users: “Expand” happens automatically now, no need for this step)
Step 4: Patch Up the Inside
Let’s get rid of the white in the middle of the letters by following these steps:
- Draw shapes to fill in the open areas.
- Group them (cmd-G).
- Select them and the outline shape and choose again Add to Shape Area from the Pathfinder Palette.
- Click Expand.
Once you expand it, it will come to the front. To send it back where it was, right-click > Arrange > Send Backward (cmd-left bracket)
Step 5: Add a Gradient to the “Plaque”
Give it a vertical linear gradient by following these steps:
- Make sure nothing is selected (click on an empty area of the stage).
- Double-click the fill color icon in the Tools Palette, and enter a light blue color #29ABE2.
- Drag the color from the Tools Palette into the color Swatches Palette so we have it for later.
- Repeat, adding a darker blue #0071BC to the Swatches Palette.
- Select the plaque (can I just call it that now? mkthx).
- Activate the Gradient Palette, and drag the light blue swatch from the Swatches Palette onto the left side of the gradient, and the dark blue onto the right.
- Using the Gradient Tool(G) drag from the plaque top to bottom, to perfect your gradient.
Step 6: Add Another Text Outline
Building upward from our base layer, let’s add another text outline by following these steps:
- Go Object > Unlock all (cmd-option-2) to select the original text
- Copy it and Paste Behind again (cmd-B)
- Using the Stroke Palette, give it a stroke of any color besides black, so you can see it (I used red). Aligned to outside is fine.
- Go Object > Lock > Lock Selection (cmd-2) on the original black text again, to preserve it for later.
Step 7: Color the Text Outline
Now let’s give your new text outline a light blue color by following these steps:
- Select the outlined text and go Object > Expand Appearance, checking fill and stroke in the dialogue.
- Right click > Ungroup (cmd-shift-G)
- In the Pathfinder Palette, choose Add to Shape Area, like we did for the plaque.
- Click Expand
- Fill it with a light blue #88DBF2 (drag this color into your Swatches Palette to save it).
Step 8: Make the Text 3D!
One sweet effect in Illustrator CS3 is the Effect > 3D Tool. Let’s apply it to our text by following these steps:
- Unlock the original text Object > Unlock All (cmd-option-2) to select it, and fill it with any color for now, I chose red.
- Go Effect > 3D > Extrude and Bevel
- Choose options similar to the following, feel free to play around here, making sure to check Preview to see what you’re doing.
Step 9: Color the 3D Letter Faces
Your 3D text might look pretty good the way it is, but I bet we can make the colors even nicer. To edit the colors we will need to break the 3D text into individual shapes. To do that follow these steps:
- Select the 3D text and go Object > Expand Appearance
- Right click > Ungroup (cmd-shift-G). That will separate each letter block.
- We want to get at just the face of each letter though, so select all the letters again and right click > Ungroup once more.
- Now select all the letter faces and group them, and give them a vertical linear gradient color bright red #FF0000 on top to dark red #7A0009 on bottom
Step 10: Color the 3D Letter Blocks
There’s not quite enough shadow on what’s behind the letter faces, so let’s darken the block part of each letter:
- Select all the pieces of the letters besides the faces. Zoom in and make sure you get them all; there might be some that are hard to see.
- Group them (cmd-G)
- Grouping them will cause them to move in front of the letter faces, so right click > Send Backward (cmd-left bracket) to place them back where they were.
- Fill them 3D with a darker red #44000A
Step 11: Create Highlights
The real magic in a good logo is in the details. We can really sharpen this one up by adding highlights to the letters. Here is a relatively quick and easy way to make them, but is our most complex set of steps thus far:
- Copy the letter faces (only) and Paste in Front (cmd-F).
- Nudge the copied faces to the right a few (2) taps.
- Select both sets of letter faces and in the Pathfinder Palette choose Subtract from Shape Area, then Expand.
- Aack! where did my text go? Don’t worry, It’s still on your clipboard so just Paste Behind (cmd-B).
- Select your highlights and fill them with our bright red #FF0000.
Step 12: Adjust the Highlights
Pretty close but not quite done! With the Direct Selection Tool (Y) select the points of any awkward highlights and adjust them to line up correctly.
Awesome! The main part of your logo is done, now let’s add more juicy text to describe your product
Step 13: Add Secondary Text
Well? What kind of cereal is it? Loops, Crisps, Nuggets, or what? Let’s go with PUFFS! Start it out just like the beginning:
- Type the word “Puffs” using the same font.
- go Type > Create Outlines.
- Right-click > Ungroup (cmd-G).
- Rotate, nudge and reposition each letter.
Step 14: Give it a Puffy Stroke
This one needs a plaque to sit on as well, but we’ll make this one rounded and puffy looking:
- Group the letters up again, Copy and Paste Behind (cmd-B). Lock the PUFFS text on top (cmd-2).
- Give it a big stroke, any color for now. Align the stroke to the outside and make it big enough to fill the inside.
Step 15: Color the Puffy Plaque
Alright this one needs a background gradient color too. Let’s give it the same color as the other plaque by following these (familiar) steps:
- Go Object > Expand Appearance, right click > Ungroup, and in the Pathfinder Palette choose Add to Shape Area, then Expand, like we did for the first plaque.
- Choose the eyedropper tool (I) and click the other plaque to copy its gradient colors.
- Use the Gradient Tool (G) to adjust the gradient to your liking.
Step 16: Puff out the Top PUFFS Text
Now we can style the original PUFFS text. Let’s add a bit of roundness to it:
- Unlock the text. Object > Unlock All (cmd-option-2).
- Give it a 1pt. stroke, aligned to the outside, with rounded corners
- Then do our familiar step: Object > Expand Appearance, right click > Ungroup, and in the Pathfinder Palette choose Add to Shape Area, then Expand.
Step 17: Create Puffy Highlights
Before we get to coloring the text, let’s make the highlights. The technique here is similar to the other highlights, but we will go an extra few steps:
- Copy your new PUFFS shape and Paste in Front (cmd-F).
- Nudge it to the right one or two taps.
- Caution: when you nudge the word over it may overlap the letter to its right. Use the Direct Selection Tool (Y) to adjust the shape on top so it doesn’t overlap.
- Select both PUFFS shapes and in the Pathfinder Palette select Subtract from Shape area, then Expand.
- Use the Direct Selection Tool to delete any little straggling pieces.
Step 18: Refine the Highlights
First of all Paste in Back (cmd-B) your copied PUFFS text and fill it with white. Now we can work on the highlights a bit more and get rid of the over-hanging top portion:
- Nudge the highlights over to the right one tap.
- Copy the PUFFS text and Paste in Front (cmd-F), then Right-Click > Arrange > Bring to Front (cmd-shift-right bracket).
- Nudge the text down one tap
- Select the text and the highlights and in the Pathfinder Palette choose Intersect Shape Areas, then Expand.
Step 19: Refine the Highlights More
Fill the new highlight shape to see what you have, but we will repeat this step to remove the over-hanging bottom portion of your highlights:
- Copy the PUFFS text again and Paste in Front (cmd-F), then bring it to the front.
- Nudge the text up one tap this time.
- Select the text and the highlights and in the Pathfinder Palette choose Intersect Shape Areas, then Expand.
- Now you can color your finished bevel effect with the light blue #88DBF2.
Step 20: Position PUFFS in the Logo
Lookin’ good yet? Let’s get PUFFS in the logo:
- Select the blue plaque behind PUFFS and give it a white stroke, aligned to the outside, and about 5pt.
- Position PUFFS the way you like under your logo.
Step 21: Warp the Logo
When you are happy with the logo so far, select both words and go Object > Warp > Make with Warp and give it an Arc with about a 13% Bend, like the image below. Make sure to check Preview to see your changes.
Step 22: Finishing Touches
Your logo is done!
Go ahead and add some background elements if you like. I made some clouds and rays but I encourage you to come up with your own!
サイト内検索
イラストレータの勉強
グラデーションと分割 図形と合流・型抜き ロゴマークの作成 テキスト落書き VECTIPS Logo Vectortuts Logo 水滴の作り方 WATER グラデーション背景 竹 リボン 薬カプセル かぼちゃ 緑の玉 亀さん 気球 花びら つやのある球 ロゴ vectips ロゴ Zee ロゴ 風船 ロゴ UPWARD ロゴ ZERO ロゴ VECTORS ロゴ VECTORSその2 ロゴ WOOF ロゴ Don't Break ロゴ Smooth ロゴ VECTORSその3 ロゴ VECTORSその4 ロゴ VECTORSその5 ロゴ VECTORSその6 ロゴ VECTORSその7 ロゴ VECTORSその8 ロゴ VECTTIPSその1 ロゴ VECTTIPS その2 ロゴ VECTTIPS その3 ロゴ VECTTIPS その4 ロゴ VECTTIPS その5 ロゴ VECTORSその8 ロゴ VECTORSその9 ロゴ VECTTIPS その6 ロゴ ROMERO WEEK ロゴ VECTORSその10 ロゴ ECLIPS ロゴ ROCKEY ロゴ VECTORSその11 ロゴ VECTORSその12 ロゴ Tutorial Shock ロゴ VECTORSその13 ロゴ VECTORSTUTS ロゴ ARCADE LOVE ロゴ Zeeその2 ロゴ VECTORS PUFFS イラスト1 イラスト2 イラスト3 イラスト4 イラスト5 イラスト6 夜空 3D ロゴ 葉と水玉とテントウムシ イラスト10 イラストカーテン イラスト木目 イラスト 幻想 イラスト メッシュの葉 イラスト 靴 イラスト 家 イラスト9 イラストレータ フォトショップ イラストレータV10の使い方デザインの勉強
デザインの基礎 AIRに挑戦 AOBADAIに挑戦 DOWNFALLに挑戦 フレームに挑戦 BOXグラフに挑戦 LUCKに挑戦 オレンジに挑戦 リングに挑戦 STORMに挑戦テキストにチャレンジ
カタカナ入力 七夕様 相田みつをの世界 誕生石 誕生石と誕生花 フランスの国旗 ドイツの国旗 イタリアの国旗 日本の国旗 ロシアの国旗 シャガール 犬のおまわりさん 拡張子 メニュー パン 世界の国旗 気になる言葉2 気になる言葉3 大きな古時計 オリエント急行 お料理教室 おしながき パソコン専門用語 地図・・・PC検定 メニュー 紅茶 特殊文字 占いいろいろ ウォルトディズニー 全館停電 ひまわり図鑑 ゆり図鑑 テキスト 初級 テキスト 中級① テキスト 中級② テキスト 上級① テキスト 上級② アロマセラピー講座1 あなたと薬 アロマセラピー講座2 オーストラリアの動物 美人が作るレシピ ブログ お料理知恵袋 ゆば ドトールコーヒー物語 地震 円の国際化 福原 愛 振り込め詐欺 楽しいガーデニング ガーリック クリップアートの色を 埼玉の観光 山梨の観光 ゴールデンウィーク はがきで挨拶 敗戦の時 阪神タイガース ハワイに行こう ヒアルロン酸 肥満の知識 ほくろがガンに要注意 今すぐトライ インターネットで調べよう ITニュース 日本のお茶 時代を切り開いた女性1 時代を切り開いた女性2 地獄めぐり 時間割 スポーツの審判 花粉症 段落番号の設定 神奈川県 漢文とは中国語か? 阪神タイガース 漢字の偏見 関節痛 ゴールデンウィーク 簡単お弁当レシピ キーボード 国民年金 暮らしを楽しく 草花図鑑その1 草花図鑑その2 行頭文字の設定 段落番号の設定 主な国際機構 浅田真央のプロファイル 数学図形の問題1 パソコンについて 中原中也 オーガニックコットン1 オーガニックコットン2 落ち葉の森 お大事に 奥の細道 ページ番号の設定 埼玉の観光 ラーメン博物館 レシピ1 レシピ2 連絡網 履歴書 竜宮城 竜宮城バザー 世界の気候 脂肪を燃やせ 資格 四季折々の野菜 春 四季折々の野菜 冬 下町で 食品の分類 生涯学習 生姜と豚肉 四季の折々野菜(春) 四季折々の野菜 秋 四季の野菜 春 下町で遊ぼう そばの献立 サッカー世界標準 スターバックス すだちとかぼす スーパーサッカー 数学の問題2 体内チェック 寅さんシリーズ1 寅さんシリーズ2 寅さんシリーズ3 寅さんシリーズ4 海から吹く風 横浜ベースターズ 郵便払込み 湯河原独歩の湯 ゆかた祭り模写は意外と簡単
大黒様 着物の柄 富岳百景 ベートーベン オペラ座 ミニー ゴメン 母の日 ドラゴンボール 潮干狩りパソコン教室
パソコン教室の特徴 会員の最大の特典は? パソコン教室の会員の種類 すべて個人指導で、解りやすく 出張!パソコン家庭教師 追加受講する場合 日曜教室、始めました パソコン教室の料金体系何を学ぶか?
どんなサービスか? 学べるソフト一覧 ホームページを作ろう パワーポイントを勉強しよう 模写の勉強 デザインの基礎 ビデオの編集をやってみよう。