Wszystkie wpisy, których autorem jest admin

Web Tools

How to Create a Promotion Vector Badge in Adobe Illustrator

Post pobrano z: How to Create a Promotion Vector Badge in Adobe Illustrator

Final product image
What You’ll Be Creating

In the following steps, you will learn how to create a promotion vector badge in Adobe Illustrator. 

For starters, you will learn how to set up a simple grid. Next, using basic tools and some aligning techniques, you will learn how to create a set of concentric circles. Moving on, you will learn how to create a stylized ribbon and how to easily bend it using some Warp effects. Finally, you will learn how to add some text on a path and a subtle texture for the entire design.

For more inspiration on how to adjust or improve your final badge, you can find plenty of resources at GraphicRiver.

1. How to Create a New Document and Set Up Grid

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 850 in the width and height boxes, and then click that More Settings button. Select RGB for the Color Mode, set the Raster Effects to Screen (72 ppi), and then click Create Document.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). You will need a grid every 5 px, so simply go to Edit > Preferences > Guides & Grid, and enter 5 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-„ keyboard shortcut.

You can learn more about Illustrator’s grid system in this short tutorial from Andrei Stefan: Understanding Adobe Illustrator’s Grid System.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Don’t forget to set the unit of measurement to pixels from Edit > Preferences > Units. All these options will significantly increase your work speed.

setup grid

2. How to Create a Set of Concentric Circles

Step 1

Pick the Ellipse Tool (L) and focus on your Toolbar. Remove the color from the stroke and then select the fill and set its color to R=73 G=35 B=84. Move to your artboard and create a 300 px grid—the grid and the Snap to Grid should make it easier.

Make sure that your shape stays selected and open the Align panel (Window > Align). Simply click the Horizontal Align Center and Vertical Align Center buttons to bring your selection to the center of the artboard.

ellipse tool

Step 2

Make sure that your shape is still selected and go to Effect > Distort & Transform > Zig Zag. Enter the attributes shown below and click OK.

zig zag

Step 3

Using the Ellipse Tool (L), create a 260 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 4

Using the Ellipse Tool (L), create a 240 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

Step 5

Using the Ellipse Tool (L), create a 220 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 6

Using the Ellipse Tool (L), create a 150 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

Step 7

Using the Ellipse Tool (L), create a 130 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 8

Using the Ellipse Tool (L), create a 110 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

3. How to Create the Ribbon

Step 1

Using the Rectangle Tool (M), create a 310 x 70 px shape and fill it with R=228 G=242 B=255. Center this new shape, make sure that it stays selected, and focus on the Appearance panel (Window > Appearance).

Select the stroke and set its color to R=73 G=35 B=84, and then open that Stroke fly-out panel. Set the Weight to 10 px and don’t forget to check that Round Join button.

rectangle tool

Step 2

Using the Rectangle Tool (M), create an 80 x 70 px shape and fill it with R=198 G=212 B=255. Place this new shape as shown in the first image, make sure that it stays selected, and focus on the Appearance panel. Select the stroke and set its color to R=73 G=35 B=84, and then open that Stroke fly-out panel. Set the Weight to 10 px and don’t forget to check that Round Join button.

Make sure that this rectangle stays selected and pick the Add Anchor Point Tool (+). Use a simple click to add a new anchor point as shown in the second image.

add anchor point

Step 3

Make sure that the rectangle made in the previous step is still selected and pick the Direct Selection Tool (A). First, select the top-right anchor point and drag it 30 px to the left, and then select the middle-left anchor point and drag it 30 px to the right. In the end, your shape should look like in the second image.

direct selection tool

Step 4

Pick the Pen Tool (P) and create a simple shape as shown in the following image. Fill it with R=73 G=35 B=84 and add a 10 px stroke of a similar color. Don’t forget to check the Round Join button for the stroke, and then lower the Opacity of your entire selection to 30%.

appearance panel

Step 5

Using the Pen Tool (P), create a simple triangle as shown in the following image. Fill it with R=73 G=35 B=84 and add a 10 px stroke of a similar color. Don’t forget to check the Round Join button for this stroke.

round join

Step 6

Select the three shapes highlighted in the first image and Group them (Control-G). Make sure that your group is selected and go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click OK.

group

Step 7

Using the Pen Tool (P), create the two triangle shapes shown in the following images. Fill both shapes with a random yellow, for now.

triangles

Step 8

Select the bottom yellow shape and focus on the Appearance panel. Replace the fill color with R=73 G=35 B=84 and add a 10 px stroke with a similar color. Remember to check the Round Join button for this stroke and then select the entire path (simply click that „Path” piece of text from the Appearance panel). First, lower the Opacity to 30% and then go to Effect > Warp > Arc Lower. Enter the attributes shown below and click OK.

Move to the top yellow shape and apply the same Appearance attributes, but replace the Arc Lower effect with the Arc Upper effect shown in the second image.

opacity

Step 9

Select your 310 x 70 px rectangle and bring it to front using the Shift-Control-] keyboard shortcut.

Pick the Pen Tool (P) and create the tiny horizontal paths shown in the second image. Add a 10 px stroke for these new paths, set its color to R=73 G=35 B=84, and don’t forget to check that Round Join button.

round cap

4. How to Add Some Text

Step 1

Pick the Type Tool (T) and open the Character panel (Window > Type > Character). Select the Insaniburger font, set the size to 30 px, and increase the tracking to 22.

Simply click on your artboard and add the „PROMOTION” piece of text. Place it as shown in the following image and set the color to R=73 G=35 B=84.

type tool

Step 2

Select all the shapes highlighted in the first image, Group them (Control-G), and then go to Effect > Warp > Flag. Enter the attributes shown below and click OK.

warp flag

Step 3

Pick the Ellipse Tool (L) and create a 200 px circle. Fill this new shape with a random yellow and center it.

Make sure that this new shape stays selected, pick the Type on a Path Tool, and simply click on the edge of your selected shape. This will allow you to add text along your path.

Add the „BEST DEALS” piece of text, set the color to R=73 G=35 B=84 and focus on the Character panel. Select the Insaniburger font, and set the size to 22 px and the tracking to 0. Next, you need to adjust the position of your text. Switch to the Direct Selection Tool (A) and simply drag that middle bracket from the outside to the inside of your circle. This should move your text inside the circle. Use that same bracket to move your text along the path as shown in the following image.

type on path

Step 4

Pick the Ellipse Tool (L) and create a 170 px circle. Fill this new shape with a random yellow and center it.

Make sure that your yellow circle stays selected, pick the Type on a Path Tool, and simply click on the edge of your selection.

Add the „SPECIAL OFFER” piece of text, set the color to R=73 G=35 B=84, and focus on the Character panel. Apply the attributes shown in the following image and use that bracket to move your text along the path as shown below.

type on path

5. How to Create the Background and Add a Subtle Texture

Step 1

Pick the Rectangle Tool (M) and create an 860 px square. Fill this new shape with R=228 G=242 B=255, send it to back using the Shift-Control-[ keyboard shortcut, and don’t forget to center it.

background

Step 2

Finally, let’s add a subtle texture. Download this set of Grunge Abstract Backgrounds from Envato Elements and drag the first image inside your document.

Resize it a little, make sure that it covers your entire artboard, and then change its Blending Mode to Soft Light.

texture

Congratulations! You’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your design.

final product
Design

Some Advice on Using Illustrations When Designing Websites

Dodaj komentarz

Post pobrano z: Some Advice on Using Illustrations When Designing Websites

An illustration is a versatile means of expressing a message.  Used in web design, illustration helps to provide a visual representation or example of what is being shared, making it a message clear.  It also offers an attractive or aesthetic element to a website.

If you’re using illustration to add to your website, using it to its full potential means creating an attractive or decorative message.  This will help you get the most out of illustration.  Let’s explore what it means to use illustration in website design, and what can be done to use illustration to its full potential.

Branding

Branding is used to create an emotional message which transcends the product and gives it a meaning.  When you create a website, you want the design to give visual representation to a business.  A website needs to give a visual feel to a client’s brand.

This means creating a visual impact.  When viewers land on a site, it should be memorable.

Illustration helps to create a memorable site because it gives a site uniqueness.  Whether you use eye-catching graphics or vector designs, your site will stand out from the competition.

Visual Appeal

When a site uses illustration, it will have an instant visual appeal.  Many companies use stock photos to add a graphic element to their sites.  However, stock photos are not unique, and not created in accordance with your brand.  As a result, your site may fade into the background.  Illustration fits in with your brand, adding an element which instantly identifies your company and makes it stand out.

An example of a site which uses fun illustrations to create a unique and exciting brand story is Luhse Tea.  This tea stands out from the competition and identifies itself as a unique but delicious and memorable brand.

Illustrations tell a story

In addition to creating an interesting and unique appeal, illustration helps to tell a story.  Some sites use illustration storyboards or slideshows to put across a message in a way which is appealing to clients or viewers.

When illustration tells a story, it can share how a brand is able to add to people’s lives, offer service or meet a need.  An original and very human story helps to connect with viewers.

An example of this is the WWF Website, which uses colorful images in the form of a slide show.   Instead of using words and statistics, WWF gives customers a clear message using an illustration.

Illustrations add interest

Long and involved messages can be hard to understand, and numbers and charts are often confusing.  Very often, viewers may feel overwhelmed or even bored by stats.

However, you can add zest to your message by using an illustration.  If you don’t have an illustrator to add unique images to your site, you can learn Adobe Illustrator by following a few simple tutorials.

Use different styles

Websites rely on hierarchy in order to communicate important messages.  Using different styles of illustration can enable you to draw attention to navigation buttons or calls to action.  These are the elements of your site that you would like to stand out.

Creating contrast often helps a design element to stand out.  If your illustrations are heavy and rough, you could create a user interface which uses sharp edges.  If illustrations are monochromatic, use design to create brightly colored navigation buttons or calls to action.

Illustrations can be used to create themes

Illustrations can be used to create a theme for a website.  This might mean using images of mountains and lakes for a nature-based company or using architectural blueprints for a building and design company.

An illustration may also be used to identify a company’s location.  In other words, a company can use illustration to identify a company.  Illustration becomes the most prominent feature on a site, and this helps to create a unique image for a company.

Mascots

Mascots provide a friendly and approachable character for a brand.  The Kellogg’s Rice Krispie characters Snap, Crackle, and Pop provide images of friendly mascots who help to define a brand.

Mascots help to identify and give personality to a site.  Using a character provides a face for the company which is able to talk to your customers.  This gives your brand a ‘human’ element and helps to make it memorable.

Illustrative Decoration

This means that illustration is used to decorate a site, offering an underlying framework or style.

However, the goal is not to represent a person, product or place, but simply to offer a sense of style or structure.  This style helps the site to connect with an audience.  Very often simple drawings and well-chosen colors add an aesthetic appeal to the site.

Illustrated Text

Creating text out of hand renderings is an opportunity to create a unique design or style for a site.  This is a great way to put your art school experience to work in order to create a distinctly individual element to your site.

Hand rendered type can be used to demonstrate a purpose.  A creative website can use illustrated text to demonstrate talent in the arts, careful craftsmanship or the uniqueness of a product.

Keep it simple

Simple illustrations help create an attractive image which informs your readers but doesn’t overwhelm them.

Keep illustrations informative

Aesthetic illustrations keep your site looking good, and this is important.  However, using illustration can help your site to share a message with your viewer.

Illustration can be used purposefully.  When designing your site, ask yourself why you would need to add to add illustrations, and how they will contribute to the goals of your site.  This will help with conceptualizing your illustrations.

Plan your designs before incorporating them into the website.  You can use pen and paper or a whiteboard to map out your designs.  This will help you to create an abundance of ideas before venturing into the digital realm.

You can then draw on similar ideas and find inspirational images.  Explore graphic design galleries and take notes on how the designers have brought their designs to fruition.  How are they similar or different to what you would like to achieve?  How would you like to use color?  How does illustration relate to content?

Ending thoughts

Illustrations add uniqueness to your site, adding personality and a sense of warmth.  Your goal as a web designer is to ensure it is used with purpose, communicating a message to your audience.

This means ensuring that there is a clear distinction between elements which share a message and those which encourage your audience to interact.  This will enable your viewers to navigate your site clearly, and take actions such as signing up for a newsletter.

It also means assisting viewers with understanding a product or service, ensuring that the site is not only beautiful but meaningful for viewers.