Feb 04

Teaser: Close Up of Targeted Graphic

Targets are common design elements because they add clear focus and interest to a design quickly and easily.

Learn how to use the Polar Grid Tool to create a Target Graphic with overlapping areas of negative space. The Polar Grid Tool is really cool it allows you to control the number and position of concentric circles as well as the number and position of cross intersecting Radial Divider lines.

We’ll be using the final design here on AiBURN for our News section. So you’ll see this design in action shortly.


Set Up

We need to set up our document for the web. Turn our grid on and make sure it snaps to each 1px of our grid. If your unfamiliar with how to set up your Illustrator document for web work then read this article Building a Website Wireframe in Illustrator. This image will be used for branding the News content of AiBURN. The main image size of the preview area on AiBURN is 180px wide by 180px high. So set up your new document to those dimensions.

Polar Grid Tool

Select the Polar Grid Tool. It is shown in the Image Below. Choose width: 170px and height: 170px. Set Concentric Dividers to 6 (these are the number of rings) and the Skew to 0 percent (if you set the skew to something other than 0 it will move the rings closer In to the center or further out from the center). Then set the Radial Dividers to 6. I set the Skew to 0 Percent, but for this tutorial the Skew really doesn’t matter because we will be adjusting this manually (so, feel free to play around with the Skew here to get a feel for it). Then I checked off the Create Compound Path From Ellipses and Fill Grid. Then hit OK.

Polar Grid Tool Settings.jpg

Before we move on to the next step, lets make sure our new Polar Grid is placed directly in the center of our document so go to View > Actual Size or (Command/Ctrl + 1). Then Got to Select > All or (Command/Ctrl + A), cut it by going Edit > Cut or (Command/Ctrl + X), and then paste it by going Edit > Paste (Command/Ctrl + V). This drops it in the center of our document.

Turn Our Grid into a Target Design

Keep the grid selected. Rotate it until it looks like the top left frame of the picture below. Then grab the end point of a Radial Divider Line with the Direct Select Tool (A). Move each line individually until they overlap the last Concentric Ring and match the layout of the top right image below. Then Select All and in the Pathfinder Palette hit Divide.

Target Paths Design

Color In Our Target

As you might have figured out from my other tutorials I’m a big believer in keeping things editable. That’s one of the reasons I love using illustrator. So, as we color in this design there are some empty spaces that we could delete. I’m just going to make them white instead to match our background color. This means that if I want to change this graphic in the future I can do so easily. I might decide to change this up a bit in the future. I think that it will serve as the news icon, but it could be flexible. I could add shapes or change the design up a bit and retain its iconic recognition.

Let’s zoom in and start with coloring the negative space first. First Select All and then make sure everything is ungrouped. Go to Edit > Ungroup or (Shift + Command/Ctrl + G). Now make a selection that grabs some elements of our triangles. Match your selection to the image below. Group it Edit > Group or (Command/Ctrl + G) and then give it a Fill of white.

Negative Space

We will add some actual color next. Match Your selection to the image below. Instead of Grouping it we’re going to use a Pathfinder Effect. Make a selection that matches the image below. Then in the Pathfinder Palette Under Shape Modes click on Add to Shape Area. Now we can apply a dark blue gradient to the shape and it will apply the gradient as if the whole selection is one item. The benefit here is that it is reversible if we want to change it in the future. We also gave it a 1px dark blue stroke.

Target Dark Rings Design

Next we are going use the same techniques as above only we’ll be adding a a light blue gradient instead and applying it to the remaining shapes.

Target Light Rings Design

Final Graphic

Go ahead and Turn off your grid by going to View > Hide Grid or (Command/Ctrl + Quotation Mark). Select the negative space and cut it Edit > Cut or (Command/Ctrl + X). Then paste it in back Edit > Paste in Back or (Command/Ctrl + B). This makes sure our white colored elements don’t cover up any of our strokes. . Then we layout our text. And your design should look like the below image. Its scaled to 300 percent. You’ll see the image at its final sized used for upcoming AiBURN News Content.

News Graphic Final

Let me know in the comments below if you have any questions or if you’ve used the Polor Grid Tool successfully on any projects.


Read More

written by admin

Feb 04

Teaser: Wireframe

Wireframing is a great tool to have in your web design arsenal. Learn to use Illustrator effectively to create web design wireframes.

This tutorial reviews some techniques for setting up your document for the web, quickly building rounded boxes for layouts, creating a repository of usable web elements, using callouts, and more.

This is a great introduction to get rolling with web design in Illustrator. And a good review for those who want to use illustrator to make website wireframes.


The Many Wireframing Tools Available

There are many programs out there for web designers to use for website wireframing. Some criteria to choosing a program to use on a given project are: your familiarity with the program, your ability to work quickly in it, and the given programs functionality and flexibility to make edits.

Some common wireframing programs you could use are outside and within the Adobe Suite. Looking outside the Adboe Suite Omni Graffle is a program that lots of web designers use for wireframing. I tried this program and while its a great tool I just didn’t connect with it.

Within the Adobe Creative Suite some common apps to use to build wireframes are Photoshop, Fireworks, InDesign, and Illustrator. Photoshop is a great and powerful tool though to many using the Vector tools in Photoshop feels a bit clunky. Fireworks is a really cool program that works great for building wireframes. I haven’t tried out its multi-page functionality yet. So, I can’t comment on the breadth of its abilities. Though I like it for building website and wireframe design’s quickly. Some people use InDesign because it has multi-page functionality and easily exports pdf docs. So, if you have a large project that has alot of wireframes it may be a decent solution. And then we come to our beloved Illustrator.

Choosing Illustrator for Wireframing

With all these other products that do the job out there why use Illustrator for wireframing? Well for those that grew up using Illustrator allot we are really quick in the program. I feel that no other program compares in feeling of use for me. I use Illustrator for wireframing when I have just a few pages to mock up, as it doesn’t have multi-page functionality. So, its especially helpful on small projects. Having all the artwork as Vector in Illustrator allows for really simple and easy changes as clients make corrections and additions to the mockups.

I use vector graphics as the foundation for allot of my web work. It helps to differentiate my style and I love making vector graphics. If you are going to be using Illustrator to mock up the website than it makes sense to use it for the wireframing. Then the conversion from wireframe to mockup is seamless. These are just a handful of reasons why I use Illustrator for website wireframing your list may differ.

Let’s Get to Wireframing in Illustrator

For the purposes of this tutorial we are going to be creating a simple wireframe based on a two column blog style design.

Setting Up Your Document

With Illustrator Open go to File > New or (Command/Ctrl + N). In the dialogue box that comes up, see image below, Name your document. For Width enter 1160px (I’m creating a design at 960px so I’m leaving 100px of space on each side). For Height choose 1000px. This is just a guess of how long I think it will be. This will likely need to be modified later though. For Units choose Pixels. Under the Advanced dropdown choose Color Mode: RGB, Raster Effects: Sceen (72pi), and Preview Mode: Pixel.

Document Wireframe Setup

Setting Up Your Workspace for the Web

Turn on your grid by going to View > Show Grid or (Command/Ctrl + Quote Mark). Now set up the size of your grid. Go to Illustrator > Preferences > Guides & Grid. In the Dialogue Box set up the Gridline Every: 1px and Subdivisions: 1. This will create a 1px grid. Now go to View > Snap to Grid (Command/Ctrl + Shift + Quote Mark). This means when you draw your layout boxes and other elements for your wireframe it will snap to exact pixel measurements on the grid.

Document Grid Setup

Turn on your Rulers View > Show Rulers (Command/Ctrl + R) and set guides that will define the 960 wide main web layout area. First Make sure the rulers zero mark is set to the top left hand corner of the Artboard. Then drag a guide from the left side of the document over until it clicks on 100px mark, as seen in photo below. Do the same thing on the 1060px mark. Now we are all set up to build our wireframe.

Document Grid Setup

Building the Layout of the Wireframe

Wireframes can be used for many different purposes. The wireframe we are using today is being built for the purpose of setting up a layout. Let’s say we want to quickly set up a layout and then get it off to the client for approval.

Drawing with the Rectangle Tool (M) is a basic part of building a Wireframe. Even when you are going to be making Rounded Rectangles its still better to use the Rectangle Tool. I’ll show you why as I build the header. Draw a rectangle 960px Wide and 120px Heigh, that is about 40px from the top of your Artboard, and on its sides touches your guides. After selecting the Rectangle Tool (M) you can click anywhere in the document and a Rectangle Dimension Dialogue box will come up. Or draw a rectangle with your mouse and use the tools below to manipulate your rectangle if it wasn’t drawn at the correct size.

Below are pictured some great tools for manipulating the dimensions of a rectangle. The Reference Point allows you to choose where the starting point is depicted from when changing the dimensions of a rectangle. If you set the reference point to the center. Then growth would happen on either side of the rectangle. If you set it to the left then it would grow to the right if you increased its size. Play around with it. It works great. Then the Width and Height values can be plugged in right there as well. Very convenient. I use these all the time.

Reference Point and Dimension Tools

Now we are going to round the corners of the rectangle. Go to Effect > Convert to Shape > Rounded Rectangle. Under Relative set the Extra Width: 0 and Extra Height: 0. Set the Corner Radius: 9px or whatever you prefer. We are setting both to 0 because we are not changing the size, but only rounding the corners. The reason to use the Rectangle Tool (and not the Rounded Rectangle Tool) and convert it to a shape is it allows you to change the size of the rectangle without distorting the rounded corners. If you used the Rounded Rectangle Tool and then made your header taller it would warp the rounded edges of your rectangle. By using the Convert to Shape Effect with a plain Rectangle you avoid that problem.

Convert to shape: Rounded Rectangle

Now we are going to use these same techniques to build the rest of our grid. A time saving technique is to copy our header rectangle that already has the rounding applied to it. That will save yo a step. Then use the Reference Point and Dimension tools at the top to change its values. Repeat this step for each layout area. Following are the dimensions of everything I created in the screenshot below: Header is 960px wide by 120px high, Primary Navigation is 960px wide by 36px high, Main Content Area is 650px wide by 670px wide, Right Column is 290px wide by 670px high, and Footer is 960px wide by 60px high. I haven’t named these areas with labels because we are going to be filling in some details shortly.

It also helps to have guides placed for our content area. Main content has 30px of padding and sidebar has 15px of padding. So place Verticle Guides at 130px mark, 720px mark, 785px mark, and 1045px mark. You can see there is 20px of space between main content and right sidebar content areas. I just eyeballed the other spacing.

Basic Layout Grid

Add Information and Details

Overall the goal here is to give the client a feel for the spacing and overall look of the site without worrying about color yet.

Stylistically the All Caps Blue elements are labels. Everything else is actual content. I reused some icons from previous projects. This can also speed up development. On my personal blog projects I’m using similar icons and styles, with slight layout modifications. This example would be another Blog Layout along the same lines. I may end up using this for a project at some point. See Blog Elephant for another example styled with similar elements.

I usually go to Lipsum.com to get my Lorem Ipsum test. I can’t remember where I got the RSS icon from. If anyone can point it out to me I’ll add a link in this post. I likely did a search for “free vector rss icons”. Here is a link to some Free Cool RSS Icons at Vectoreezy. Here is a link to Blog Spoon Graphics on how to Create a Vector RSS Icon with Illustrator. I’ll be covering some details on the other icons I used here on another tutorial.

Wireframe Details Small

Adding Callouts to the Wireframe

Go to File > Document Setup Under the Artboard drop down set your Height: 1300px. This will give you some room to add callout notes below your wireframe. These are just examples of how callouts could be used. Sometimes they are very useful and other times I don’t use callouts at all, but rather place the notes directly into the wireframe.

Draw a blue circle and put a number in it and group the element. Then you can move it around to where you need to use the callout and then copy and place it below in the Callout Notes to reference it.

Once your wireframe is complete I recommend adding a touch of branding at the bottom to give it the feeling of professionalism. And add all your contact information. You never know down the road if this will be needed by your client. Keeps it handy for them.

Wireframe Callouts Small View Full Scale Final Version

The Many Flavors of Wireframes

Wireframes are used for many purposes. The wireframe we created above was used to show a potential client a layout possibility. Imagine this compared to a couple other layout possibilities and it would be some good amunition for the client to decide on a direction. By using illustrator it keeps things flexible if your client has some changes to make to the layout. The wireframe above has some level of detail, but depending on the client’s needs you may choose to put more or less details into the wireframe. It will also likely grow as the process of communication progresses with the client.

While this wireframe we created focuses on layout options, wireframes are a great tool to quickly access options for any number of design and functional requirements. You could have a set of wireframes that show different navigation options for example.

This tutorial has reviewed some common elements you could use in your wireframing of documents within illustrator. If you would like to give additional tips on wirframing in Illustrator or links to tools you recommend for wireframing in other programs feel free to comment below.


Read More

written by admin

Feb 04

Teaser: Snow Globe

Happy Holidays to Everybody form AiBURN!

I hope you are all getting some much needed rest and spending lots of quality time with your families.

This tutorial reviews some techniques used to create the snow in this Holiday Snow Globe. The Symbol Sprayer Tools are really useful for covering large areas of your illustrations with repeating shapes that can have slight variations. Get started using this toolset. It will save you lots of time and has some really cool features.


Snow Globe Illustration

I created the illustration below to share with the AiBURN community for the holidays. It represent my family on christmas morning. The snowman with the top hat represents me. The snowwoman with the pink/purple scarf and cap represents my wife. The little guy represents my son looking super happy about to open up all his presents.

I also want to review how symbols where used to create the snow in this globe. This tutorial will cover numerous techniques for working with the Symbol Sprayer Tools.

Making Snow with the Symbol Sprayer Tools

We are going to use one shape to create all of our snow. I looked at some pictures of snow globes and found that sometimes the shapes used for the snow is something other than a sphere. So to be different I decided to use a colored triangle. First step is to draw your shape at approximately the size you want to use it at. The shape below is zoomed in on so you can see the gradient. I drew a triangle and gave it a white to blue gradient. Then open the Symbols Pallette Window > Symbols (Shift + Command/Ctrl + F11) and drag and drop the shape into the Palette.

Make sure your new symbol is selected in the Symbols Palette. Then grab the Symbol Sprayer Tool from the Tools Palette (Shift + S). In the Illustration below I detached the Tool Set from the Tools Palette. In the first panel at top left you can see that I focus on one area of the illustration. I didn’t spray across the whole globe at once, but rather worked on one area at a time. In Panel One at top left you can see the bottom right hand corner of the globe being worked on. Panel Two at top center shows the Symbol Spinner Tool in action. This tool is good for changing the direction of your symbols. Next up top right is the Symbol Sizer Tool. This can make the shapes larger by default. I held down the option key while using this tool and that makes the symbols smaller.

Now view the lower row of screenshots. The Symbol Scruncher Tool is used to bring shapes closer together. When shapes are sprayed onto the canvas with the Symbol Sprayer Tool the shapes get pushed further from the center of where you are spraying the longer you hold down the mouse. The Scruncher Tool will move these symbols closer to the center of where you are pointing. The next tool used in the bottom center panel is the Symbol Screener Tool. This tool is really cool. I’ve found that to get good results you have to move the tool fairly fast. I selected a 30 percent black fill for screening the object and then quickly moved the tool over some of the symbols. It added depth to the snow in the illustration.

The final panel at bottom right shows the results. The bounding box encompasses the area of symbols we just created. There are a couple tools I didn’t use for this illustration in the Sprayer Palette. Try them out to get a feel for everything these tools can do. Also, hit return while any of these tools are selected and it will bring up the Symbolism Tools Options Box where you can make adjustments to things like the Diameter or Intensity of the spray. Hints are given in this dialogue box on how to use shortcuts with these tools.

After completing one section of the globe I copy, drag, rotate, and resize that symbol group around the globe to fill the whole globe with the snow symbols. You could also go in and spray some more or make any adjustments you feel necessary with the Sprayer Tools. I found that focusing on one area at a time is more effective than trying to spray the whole globe at once.

Happy Holidays

I hope you enjoyed this tutorial and that you are getting some much needed rest and family time during the Holiday Season. If you have any questions on how other parts of this illustration were created let me know in the comments below.


Read More

written by admin

Feb 04

Teaser: Multiple Views

Review the basics of Moving, Zooming, and Viewing an Illustrator Document. Get some most used keyboard short cuts.

Kick it up a bit and learn how to use the Navigator Panel, Create New Views, and Open Multiple Windows within the same document.

Use these skills to improve your Work Flow and really fly around your Illustrator Artwork.


Background

Recently over at Illcraft Artist and Illustrator Brian Denham wrote a blog post titled “Double Vision”. Whereby, he opens a second copy of the same Illustrator document in order to have a zoomed out view of the document open on one side of the screen and the zoomed in document he’s editing on the other. He feels it saves him time so he doesn’t have to zoom in and out constantly when working on artwork.

This is something I had never done. So, it got me thinking what other aspects of Moving, Zooming, and Viewing an open Illustrator document was I not aware of nor taking advantage of. Also, I’m using CS3. So, all the techniques below may or may not work in earlier versions of Illustrator.

Moving and Zooming

The basics of moving and zooming around a document got me through years of using Illustrator. Of course you have the scroll bars (Not my favorite). The Hand Tool (H) is much easier to work with than the scroll bars for moving yourself around the document. It allows you to literally grab and move the window view around.

In the bottom left hand corner is a magnification selection area. Or use the shortcut to Zoom Out Command/Ctrl + Minus Sign or to Zoom In Command/Ctrl + Plus Sign. These shortcuts follow the defaults set in that magnification area in the bottom left hand corner of the screen.

When you want to control the area of your zoom use the Zoom Tool (Z). Double Clicking on the Zoom Tool in the toolbar will bring you to a 100 percent magnification. This is not the same as going to View > Actual Size (Command/Ctrl + 1). The Actual Size brings you to the same magnification, but to the default center of the document. Whereas, Double clicking the Zoom Tool will be based on where you are in the document. View > Fit In Window (Command/Ctrl + 0) will fit your whole document centered in the window. This is a good shortcut. Sometimes you need to quickly see how your document as a whole is looking.

Set Your Own Views

This is a bit more advanced use of moving around the document. It allows you to create exact positions and magnifications you can jump to on the screen. I don’t use this technique very often. Though it may be helpful to you.

Go to View > New View. In the View Dialogue Box enter the Name you want to give your view. Now any time you want to jump to this exact spot on the screen at this exact magnification you go to View > Name (Name is what you named the view, in this case Logo).

This technique doesn’t take very long and can help you get to specific areas of a document quickly. It is especially helpful with large documents that have areas you want to zoom in close to. If you use illustrator for website creation views can be used for specific areas or regions of your document. You could create a header view, a footer view, or a zoomed in view for the logo. Let me know how you use views in the comments.

Ever since I picked up Illustrator I wanted to be able to set keyboard shortcuts for views. If this ability was in place I would use views all the time. This is a feature I would love to have Adobe add. It would make views really useful. In website creation it would allow me to fly around the document with quick keyboard commands. I’m sure graphic artists would benefit from this feature as well when creating large illustrations.

Navigator Panel

The Navigator Panel is great. I’ve only recently started using it. You can get to areas of the document really fast with this tool. I usually keep it really small and have it open above my layers. For demonstration purposes I enlarged it in the screenshot below.

To open the Navigator Panel you go to Window > Navigator. Using this tool is really intuitive. Just drag the view square around the Navigator Panel and it will mirror your movements in the open document Window. All the shortcut magnifications will work and the Navigator Panel display box will adjust in size accordingly. You can also type over the magnification amount in the left hand corner of the Panel or use the scrolllbar in between what looks like a small mountain range and a big mountain range. Clicking on the Big Mountain Range Icon is like hitting Command/Ctrl + Plus Sign and clicking on the Small Mountain Range Icon is like hitting Command/Ctrl + Minus Sign.

In the next section I’ll cover multiple Window. The Navigator panel does work with multiple windows open. I would like it if Adobe had the position of the box in the Navigator Panel auto adjust based on the new position and magnification of the selected window. That would improve its use with multiple windows open. On to using multiple windows.

Multiple Windows

The ability for Illustrator to open Multiple Windows makes me wish I had a dual screen setup, which I currently do not. It would be cool to have a full document view on one screen and the window I’m working in on the other screen.

Opening another window is really simple. Go to Window > New Window. Then scale the window. Position it where you want and set the magnification to anything you see fit. A selection or change you make in one window will automatically show in any other window. You can save any open window. Even though there are multiple windows open its still just one document. In the screenshot below you can see how the selection of the AiBURN icon is the same in every open window.

Apply These Techniques in Your Workflow

As with most programs we get used to working with certain tools and routines and may not realize the program has more options. Maybe you already used or were at least aware of all the tools and shortcuts covered in this article. If not let me know in the comments how they work out for you. How have they improved your workflow? Also, let me know if you have any techniques that work well for Moving, Zooming, or Viewing an Illustrator document that were not covered in this article. I’d love to expand my skill set as well.


Read More

written by admin

Feb 04

Teaser: Dynamic Sign Up Sign

Learn how to create a dynamic Sign styled like you would see on the roadside in the States. Signs are an easy way to visually draw attention to the information you want to promote.

You’ll learn how to use the Appearance Palette in a dynamic and reusable way. We’ll explore the benefits and limitations of making graphics with these techniques.

Use these skills to create other dynamic and reusable Graphic Styles.


Background

In October Veerle had a post about Leopard style effects on her blog. In one section she discusses text effects and uses the Appearance Palette in Illustrator to create a button. Mordy Golding shows how to create a Similar Effect in Illustrator in a video podcast in December. You may also find his blog post on Rounded Corners helpful.

The techniques presented in this tutorial take some of the work presented above a bit further. This exposes the benefits of using these techniques and some of the difficulties.

An excessive amount of screenshots are displayed in the next section so you get the feel for these techniques. Thereafter, the screenshots will be sparse and you’ll need to rely on the text instructions.

Let’s Get Started

Select the Type Tool (B) and type in the text “SIGN UP”. I used Myriad Pro Bold Font at 22pt and I used All Caps. Change the text to a White Fill.

Make sure the Characters Layer is chosen in the Appearance Pallette. Select the Arrow in the top right corner of the Pallette and Add a New Fill.

Dynamic Sign First Fill Gradient

Set this New Fill to a Green Gradient of your choice. I used a Green Linear Gradient set to an Angle of -60. You can see below that there isn’t much to see yet. Make sure you Keep This Gradient Selected for the next step.

Dynamic Sign Green Gradient

Now go to Effects > Convert to Shape > Rounded Rectangle. Select Relative and set Extra Width: 18px and Extra Height 10px. I used the default Coner Radius: 9px. Hit Ok.

Dynamic Sign Rounded Rectangle

We are going to apply a stroke to the sign next. Select the existing Stroke that currently has no fill and set it to a Fill of White. You’ll see the text get stroked, but keep it Selected for the next effect when you’ll tranform it into a Rounded Rectangle.

Dynamic Sign Stroke Color

Now go to Effects > Convert to Shape > Rounded Rectangle. Select Relative and set Extra Width: 16px and Extra Height 8px. I used the default Coner Radius: 9px. With Preview selected you can see the result. Hit Ok.

Dynamic Sign Stroke Rounded

We are going to apply a drop shadow behind the text to make it stand out a bit. Select the White Fill Layer in the Appearance Palette.

Select White Fill

Now go to Effects > Stylize > Drop Shadow. Set Opacity to 75. Set X Offset: 1px. Set Y Offset to 1px. Set Blur: 1px. Set Color: Black. With Preview selected you can see the result. Hit Ok.

Dynamic Add Drop Shadow

Our Sign Will Look better on a Pole

Dynamic Sign Finished Sign

Create a New Fill below our Green Gradient Layer. Give it a Gray Gradient with an Angle of 0. You won’t see anything take effect yet.

Go to Effects > Convert to Shape > Rectangle. Select Absolute and set Width: 8px and Height 20px. With Preview selected you can see the result. Hit Ok.

Our pole needs to be moved down a bit. Go to Effect > Distort & Transform > Transform Effect. Under Move set Verticle: -32px. With Preview selected you can see the result. Hit Ok.

Now we are going to put a cap on top of the pole. Create a New Fill above the last one with the same gradient as the pole. Go to Effects > Convert to Shape > Rectangle. Select Absolute and set Width: 8px and Height 1px. With Preview selected you can see the result. Hit Ok.

Our pole needs to be moved up a bit. Go to Effect > Distort & Transform > Transform Effect. Under Move set Verticle: 32px. With Preview selected you can see the result. Hit Ok.

Create a Radial Gradient Background and set it to White in the center and Light Blue on the outside. This will make your sign look like there is sky behind it.

Turn This Into a Reusable Graphic Style

Select your Sign. Drag it to your Graphic Styles Palette and Drop it in. Your graphic style is now ready to be applied to any text you select. Below you can see how your final Palette should look.

Dynamic Sign Graphic Style

Take Advantage of the Dynamic Effect

Select the text with your Text Tool (T). And try typing different words. Watch the sign grow as you type letters.

Review of Benefits and Potential Issues with this Technique

Its great that Graphic Styles can be saved and applied over and over again on new documents. If you have text you need enclosed in a Graphic Style often this is a good technique.

There are some issues with this technique. The layers that are setup in the Appearance Palette cannot be named. This can make organizing the styles difficult. Maybe Adobe will allow naming of these layers in the future.

Creating some of these styles is not so intuitive. Especially when you apply something and you don’t see any effect until you apply another technique on top of it.

There can be size issues. Styles might not look good at text set at different sizes. It may only look good at the size you targeted. You’ll have to experiment with this. It depends on the effects your using.

Overall using the Appearance and Graphic Styles Palette is pretty cool. Lots of interesting, dynamic, and reusable styles you can create. Try out some of the other Effects and share your results in the comments. I’d love to see what you can come up with.


Read More

written by admin

Feb 04

Teaser: Floral Transparency Effect

Learn how to create a bouquet of Tropical Flowers. This tutorial is a breeze. You’ll blow through this really fast.

You’ll learn shortcuts for rotating objects, transparency effects, and how to create exciting geometric patterns.

Use these skills to create great background elements in your illustration or design work.


Draw Your Petal

First Turn on your grid View > Show Grid or (Command/Ctrl + Quotes). Then turn on snap to grid View > Snap to Grid or by holding down all three (Shift + Command/Ctrl + Quotes). Set your Fill to None (Forward Slash) and your Stroke to 1px with a Color of Black. Now grab the Pen Tool (P) and draw one half of your petal. Then select that half and go to Object > Transform > Reflect. Make sure its set to a Vertical Axis, a 90 Degree Angle, and hit Copy.

With the arrow key nudge the copy over until the top and bottom points align. You can turn off your grid now View > Hide Grid or (Command/Ctrl + Quotes). Use the Direct Selection Tool (A) and draw a box around the two top points. Then go to Object > Path > Join or (Command/Ctrl + J). For the Points choose Corner. Then repeat the process for the bottom two points. Now your first Petal is Complete.

Turn Your Petal into a Flower

Now with your petal selected with the Select Tool (V) grab the Rotate Tool (R). Hold down (Option) and click on the bottom tip of the petal. This is how you can activate the rotate dialogue box and rotate an object from a point you indicate. Now input a 30 Degrees Angle and hit Copy.

(Command/Ctrl + D) is a really handy shortcut, it will repeat the step you just did. Hit (Command/Ctrl + D) 10 times in order to completely rotate copies of your petals until you have a complete flower shape.

Let’s Add Some Color

Select your flower and turn your stroke off. Then set the Fill to a Gradient of your choice. I used a blue linear gradient.

Now to get a more interesting effect go to the Transparency Window and choose Multiply.

Transform Your Flower Into a Whole Bouquet

I didn’t want my flowers to multiply each other in the Bouquet. So I copied a flower, dropped it behind (Command/Ctrl + B), turned off Multiply by setting it back to Normal in the Transparency Window, and set the Fill Color to White. Then I grouped this background with the top colored layer. This gives each flower a white background. So their transparencies wont effect each other.

Experiment with different Transparency Settings, Gradients, and Colors to get an effect you like.


Read More

written by admin