Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 28 2012

07:37

Adobe Illustrator Tutorial: Create a Set of Sleek Web Ribbons


  

In the following Adobe Illustrator tutorial you will learn how to create a set of sleek web ribbons. We’ll start with two simple shapes and some basic masking techniques. Next, using a simple rectangle and some simple vector shape building techniques we’ll create the overall ribbon shape. Once we have the starting shapes we’ll continue with the smaller parts. Using some Pathfinder options, several Warp and Gaussian Blur effects plus some basic blending techniques we’ll add the final touches.

As always, this is the final image that we’ll be creating:

Step 1

Open Illustrator and hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a gridline every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Ellipse Tool(L) and create a 250 by 40px shape. Fill it with the linear gradient shown below, lower its opacity to 50% and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK. Bear in mind that the yellow zero from the gradient image stands for opacity percentage. Switch to the Rectangle Tool(M), create a 350 by 50px shape, fill it with black and place it as shown in the second image. Reselect both shapes, open the fly-out menu of the Transparency panel, click on Make Opacity Mask then uncheck the Clip box. In the end your masked ellipse should look like in the third image.

Step 3

Pick the Rectangle Tool(M), create a 180 by 75px shape, fill it with the linear gradient shown below and place it as shown in the following image. The white numbers from the gradient image stand for location percentage.

Step 4

Reselect the rectangle created in the previous step and go to Object > Path > Add Anchor Points. Keep focusing on this shape and grab the Direct Selection Tool(A). Select the middle, bottom anchor point and drag it 15px up. In the end your shape should look like in the second image. Move to the Layers panel, double click on this shape and name it "Ribbon".

Step 5

Focus on the top, right corner of the shape edited in the previous step. Pick the Rectangle Tool(M), create a 10px square, fill it with the linear gradient shown below and place it as shown in the following image. Focus on this new shape, grab the Delete Anchor Point Tool(-) and click on the top, right anchor point. This will remove the anchor point turning your square into a triangle.

Step 6

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect the triangle shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the right using the right arrow from your keyboard.

Reselect both copies, open the Pathfinder panel and click on the Minus Front button. Fill the resulting shape with black and lower its opacity to 15%. Focus on this new shape, grab the Delete Anchor Point Tool(-) and get rid of the top, right anchor point. In the end your shape should look like in the fourth image.

Step 7

Reselect the triangle shape created in the fifth step and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its opacity to 15%. Focus on this new shape, grab the Delete Anchor Point Tool(-) and get rid of the top, right anchor point. In the end your shape should look like in the fourth image.

Step 8

Reselect the triangle shape along with the two shapes created in the previous two steps and group them (Control + G). Make sure that this new group is selected and go to Effect > Warp > Arc Upper. Enter the data shown below and click OK.

Step 9

Enable the Snap to Grid (View > Snap to Grid). Reselect the group created in the previous step and go to Object > Transform > Reflect. Check the Vertical button and click on the Copy button. This will create a horizontally flipped copy of your group. Select it, drag it to the left and place it as shown in the third image. The Snap to Grid will ease your work.

Step 10

Reselect "Ribbon" and focus on the Appearance panel. Select the fill and go to Effect > Warp > Shell Lower. Enter the data shown below and click OK. Make a copy of "Ribbon" (Control + C > Control + F), select it and go to Object > Expand Appearance. Move to the Layers panel, double click on this new shape and name it "RibbonExpanded".

Step 11

Disable the Snap to Grid (View > Snap to Grid). Reselect "RibbonExpanded" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, right shape and fill the other one with white. Also, lower its opacity to 40% and change the blending mode to Soft Light.

Step 12

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, right shape and fill the other one with black. Also, lower its opacity to 20% and change the blending mode to Soft Light.

Step 13

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, left shape and fill the other one with white. Also, lower its opacity to 40% and change the blending mode to Soft Light.

Step 14

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, left shape and fill the one shape with black. Also, lower its opacity to 20% and change the blending mode to Soft Light.

Step 15

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image.

Step 16

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image and change its blending mode to Soft Light.

Step 17

Enable the Snap to Grid (View > Snap to Grid). Pick the Ellipse Tool(L), create a 240 by 45px shape, fill it with a random color and place it as shown in the first image. Select this new shape along with "RibbonExpanded" and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its opacity to 40% and change the blending mode to Overlay.

Step 18

Reselect "Ribbon", focus on the Appearance panel and add a second fill using the Add New Fill button. Select it, drag it in the bottom of the Appearance panel, make it black, lower its opacity to 7% and go to Effect > Warp > Shell Lower. Enter the data shown below, click OK and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.

Step 19

Reselect "Ribbon", focus on the Appearance panel and add a third fill. Select it, drag it in the bottom of the Appearance panel, make it black, lower its opacity to 10% and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.

Step 20

For the following step you will need a grid every 1px. So, go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Pick the Rectangle Tool(M) and create a 280 by 1px shape. Place it as shown in the following image, fill it with the linear gradient shown in the first image then send it to back (Shift + Control + [ ).

Step 21

Let’s add a simple background for our ribbon. Pick the Rectangle Tool(M), create a shape the size of your artboard, fill it with R=190 G=190 B=190 and send it to back (Shift + Control + [ ).

Step 22

Disable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Reselect the thin rectangle created in the twentieth step and make a copy in front (Control + C > Control + F). Select it and move it 1px down using the down arrow. Make sure that your copy is still selected, focus on the Appearance panel and replace the existing linear gradient with the one shown in the following image.

Step 23

Pick the Type Tool(T) and add your text. Set its color at R=42 G=92 B=5 then go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 24

Reselect the rectangle used for the background, focus on the Appearance panel, add a second fill and use the radial gradient shown below. Keep focusing on the Appearance panel and add a third fill for this shape. You’ll need a built-in pattern for this new fill. Go to the Swatches panel, open the fly-out menu and go to Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures.

A new window with a set of built-in patterns should open. Make sure that your background rectangle is still selected, focus on the Appearance panel and select that third fill. Lower its opacity to 20%, change the blending mode to Multiply and add the "USGS 19 Land Inundation" pattern.

Step 25

Finally, here’s a quick technique that you can use to recolor your ribbon. Select all the shapes that make up your ribbon and go to Edit > Edit Colors > Recolor Artwork. Click on the Edit button, make sure that the "Recolor Art" and the "Link Color Harmony" buttons are checked then play with the color handles.

And We’re Done!

Once again, here’s how your final result should look.

Now that we have made it to the end, we would like to know your thoughts on this new tutorial. Leave us your two cents in the comments.

(rb)

May 19 2011

10:24

50 Free and High-Quality Icon Sets

Advertisement in 50 Free and High-Quality Icon Sets
 in 50 Free and High-Quality Icon Sets  in 50 Free and High-Quality Icon Sets  in 50 Free and High-Quality Icon Sets

A beautiful and elegant icon set is an asset to any good web design. Creative use of an icon set can help make or break the overall look of the design. Freebie design components, especially beautiful icon sets can be found in nearly every designer’s toolbox, or if not already among their tools, then certainly on their wishlists. Which is what brings us here today…adding to that tool kit!

In this post, we are presenting an awe-inspiring collection of 50 magnificently designed, free and professional high-quality icon sets. All of the icon sets featured are free. Nevertheless, please be sure to read the license agreements carefully before using all icons since this can change from time to time. Enjoy!

Free and High-Quality Icon Sets

Symbolicons: Transportation
A free set of stylish transportation icons from the full Symbolicons set.

Icondesign10 in 50 Free and High-Quality Icon Sets

Multimedia Icon Set
The set is called the ‘Multimedia Icon Set’ and, as the name suggests, contains 14 multimedia icons in PNG format. You will also find included in the download the AI source files. You are free to use this icon set for both personal and commercial projects.

Icondesign51 in 50 Free and High-Quality Icon Sets

Exclusive Free Icons: “Appliance Icons”
The set includes 10 super cute looking icons of all types of household appliances.

Icondesign7 in 50 Free and High-Quality Icon Sets

A Set of 15 TV Icons
A fresh set of 15 TV icons of varied designs, available in 256 x 256 pixels.

Icondesign4 in 50 Free and High-Quality Icon Sets

App Icons
It includes 28 icons for various applications, available in both png and ico format, from 128 to 16px.

Icondesign17 in 50 Free and High-Quality Icon Sets

iPad 2 Icons
The set includes 18 beautifully rendered icons of the iPad 2 with varying colored covers.

Icondesign22 in 50 Free and High-Quality Icon Sets

Cute Twitter Icons ~ Chrome
A new range of twitter icons in 256 x 256 pixels. Liven up your website with one of these little cuties.

Icondesign1 in 50 Free and High-Quality Icon Sets

Leather briefcase PSD & icon
A set of briefcase icons available in 512×512, 256×256, and 128×128 pixels.

Icondesign50 in 50 Free and High-Quality Icon Sets

Style Guides: A Free Icon Set for Writers
This high-quality icon set features 5 icons, all in PNG format, ranging from 32×32 px to 512×512 px.

Icondesign8 in 50 Free and High-Quality Icon Sets

Follow Me Icons
4 png icons for your blog design projects which include Twitter, Facebook, Feed and Favorite.

Icondesign18 in 50 Free and High-Quality Icon Sets

RSS Icons
A choice of 16 chic RSS icons to liven up any site.

Icondesign2 in 50 Free and High-Quality Icon Sets

Brand New Social Icons ~ Teacups
A cup of tea, anyone? 6 social icons that look simply delicious!

Icondesign6 in 50 Free and High-Quality Icon Sets

Minimalistica Icon Set
This simple two-toned collection is available in PNG: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128

Icondesign9 in 50 Free and High-Quality Icon Sets

Awesome book icon
Awesome icon of a set of books, viewed from the spines as though they were on a shelf. 512px, 256px, 128px and 64px versions of the icons available in one archive.

Icondesign11 in 50 Free and High-Quality Icon Sets

Button-style Social Icons
A simple and clean set of social media based icons in 256 x 256 pixels.

Icondesign3 in 50 Free and High-Quality Icon Sets

Shopping Icons ~ Brand new set!
A set of beautiful icons for any web based shop or retail needs.

Icondesign5 in 50 Free and High-Quality Icon Sets

Purse icon
Beautiful leather purse, filled with large bills. Open it, take it

Icondesign13 in 50 Free and High-Quality Icon Sets

65 Classic Cocktails
A cool and stylish range of icons that one might find quite refreshing.

Icondesign14 in 50 Free and High-Quality Icon Sets

48 pixels web iconset
Includes a total of 226 icons related to websites, design, e-commerce.

Icondesign15 in 50 Free and High-Quality Icon Sets

Credit Card icons
A gorgeous set of 31 credit card icons.

Icondesign16 in 50 Free and High-Quality Icon Sets

Dreadhead Creatures
10 cute and coiffed original vector creature icons.

Icondesign19 in 50 Free and High-Quality Icon Sets

Things Icon
A random set of six .png’s ranging from 512px to 16px.

Icondesign12 in 50 Free and High-Quality Icon Sets

Comic Icons
A set of outstanding comically illustrated Icons.

Icondesign20 in 50 Free and High-Quality Icon Sets

Junior Icons
The sharp set includes 146 beautiful icons.

Icondesign21 in 50 Free and High-Quality Icon Sets

Rabbit Icons
An intriguing special Easter Bunny icon set which comes in 4 sizes as transparent PNG files available: 64x64px, 128x128px, 256x256px

Icondesign24 in 50 Free and High-Quality Icon Sets

Kraftwerk
This collection contains 13 icons with large resources for Windows & Mac OS X.

Icondesign25 in 50 Free and High-Quality Icon Sets

Classic Cars Icons
The set includes 6 beautiful icons of some classic cars.

Icondesign26 in 50 Free and High-Quality Icon Sets

HYDROPRO ICON PACK
HydroPRO Icon Pack contains 50 high quality (256×256 pixels) icons; PNG and ICO formats. This package includes: HDD Icon, My Computer Icon, Keyboard Icon, Mouse Icon and more…

Icondesign31 in 50 Free and High-Quality Icon Sets

Smooth Metal Software Pack
A set of 50 wonderfully illustrated icons for apps.

Icondesign27 in 50 Free and High-Quality Icon Sets

GPS navigation icons Part-2
This set includes GPS navigation icons in 4 colors and each icon comes in a 128×128 pixels fully layered PSD file.

Icondesign47 in 50 Free and High-Quality Icon Sets

Farm Fresh Icons
A set of beautiful and clean icons that contains an astounding 2000 application and mini icons.

Icondesign28 in 50 Free and High-Quality Icon Sets

Social Media Icons by Iconshock
This set includes 12 fantastically designed Social Media Icons.

Icondesign30 in 50 Free and High-Quality Icon Sets

PSD Shopping Bag Set
This set containes 9 beautifully crafted shopping bag icons.

Icondesign39 in 50 Free and High-Quality Icon Sets

Free credit card Icons
The most complete credit card icon set ever, 457 payment and credit card icons packed in this fantastic collection, it includes 9 sizes, pixel perfect icons for smaller sizes and vector for larger sizes.

Icondesign32 in 50 Free and High-Quality Icon Sets

Home icons
A set of home icons available in 512×512, 256×256 and 128×128 pixels with psd files.

Icondesign45 in 50 Free and High-Quality Icon Sets

High detail social icons
A set of visually stunning social media icons.

Icondesign33 in 50 Free and High-Quality Icon Sets

User icons
This set include 55 awesome user icons.

Icondesign36 in 50 Free and High-Quality Icon Sets

3D Download Icon
This set containes 4 transparent PNG files (64px; 128px; 256px; 512px) to help meet your project download needs.

Icondesign38 in 50 Free and High-Quality Icon Sets

Blue Icons by Shek
A set of 5 beautiful icons in a blue hue.

Icondesign29 in 50 Free and High-Quality Icon Sets

PSD Thank You Bubble Set
A wonderful set of 9 attractive bubbles that can be used for any purpose.

Icondesign40 in 50 Free and High-Quality Icon Sets

Free Briefcase Icon
A highly detailed briefcase icon presented in 3 different dimensions.

Icondesign42 in 50 Free and High-Quality Icon Sets

iPhone & iPad PSD templates & icons
A beautiful set of PNG icons in sizes 256×256, 128×128 and 64×64 pixels for use in your web projects.

Icondesign43 in 50 Free and High-Quality Icon Sets

Twitter Icons
A well designed set of Twitter Icons in vector format.

Icondesign34 in 50 Free and High-Quality Icon Sets

World globe PSD & icons
A set of different world globe icons with fully layered Photoshop files. Icons in various standard sizes such as 512×512, 256×256, 128×128, 64×64 and 32×32 pixels.

Icondesign44 in 50 Free and High-Quality Icon Sets

Ice candy PSD & icons
A set of tasty looking frozen dessert treat icons available in 512×512 and 256×256 pixels.

Icondesign46 in 50 Free and High-Quality Icon Sets

Free iMac Icon
Free iMac icon that will perfectly suit your creative headers, presentations, business cards, portfolio websites and print works. This quality illustration has been resized in three different dimensions to be useful for various needs.

Icondesign41 in 50 Free and High-Quality Icon Sets

GPS navigation icons Part-1
Each icon comes in a 128×128 pixels fully layered PSD file and isolated on a transparent background for the use in web projects as icons.

Icondesign49 in 50 Free and High-Quality Icon Sets

Html5 icons
A set of beautiful icons inspired by the html5 icon.

Icondesign35 in 50 Free and High-Quality Icon Sets

Battery Icons
This set includes PNG icons in sizes 512×512 and 256×256 pixels complete with psd.

Icondesign48 in 50 Free and High-Quality Icon Sets

Monochromatic Iconset
A simple, yet classic, set of monochromatic icons with an available PSD file.

Icondesign52 in 50 Free and High-Quality Icon Sets

Leaf Mimes Icons
A unique set of icons that can add a bit of style to your project.

Icondesign53 in 50 Free and High-Quality Icon Sets

(rb)

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl