Saturday , December 14 2019
Home / Uncategorized / How to create a retro-style striped style effect of the 70’s

How to create a retro-style striped style effect of the 70’s

<! –


Last week I received an email from a reader of Spoon Graphics who wanted some advice to create a striped-like effect in Illustrator, citing a retro-style logo of the years 70 as an example. I was sure I created a similar effect in a recent tutorial, but it turned out to be the art of the title I produced for my Washed & Worn textures I was thinking about. In today's tutorial on Adode Illustrator I will guide you through my process of creating this artwork to produce a similar style inspired by the '70s, then follow it with an alternative process that has the advantage of preserving the text live.

How to create a retro-style striped style effect of the 70's

The artwork we will create in this tutorial is a retro-style design in the style of the brands' logos of the 70s that present the striped trend of the era. My example uses the word Renegade, set in a delightful bulb script font, with a series of rainbow stripes alternating with a nostalgic palette of muted shades. To complete the design, we will use the Washed & Worn weaves to make the type look like a classic t-shirt.

The secret ingredient for creating a beautiful type of script, in addition to becoming a master of hand lettering, is to use a premium quality font that contains professional OpenType features. One of my go-to characters is called No. Seven. Set your chosen text with the text tool in a new Illustrator document to display the font in its default form.

The wonderful OpenType features of alternate fonts allow you to completely customize your type so that each letter is perfectly composed with the next one. Each time the characters are shown in turn and review the various glyphs available to produce an absolutely unique design.

One of the revealing details that distinguishes custom characters from a basic font by hand is the repetition of characters, but the alternative glyphs available in OpenType fonts enable you to reduce any uniformity with different letter styles.

Make the necessary kerning adjustments by positioning the cursor between the relevant letters, then use the ALT and left / right keys to change the space.

Give the text an extra touch with a Shear transformation (object> Transform> Tilt). Enter -7 ° with the Vertical option selected.

Out of habit, I tend to outline my type and then apply a series of changes. I'll cover an alternative approach later that preserves live text, but right-click and choose Create outlines on this text element.

Change the fill color to a light beige tone (# f3e1c8). I mixed and matched the colors of a pair of ColourLovers palette, called Old T-Shirt and I Need Your Love.

Go to Object> Path> Offset Path and enter 10px to produce a wider outline around the type. Give this new scheme a dark blue fill color of # 374160.

Use the Pathfinder panel to merge all individual contours of letters into a single continuous shape using the Unite button.

Place this blue outline under the beige text by selecting the Arrange> Door at the bottom menu.

By default the offset path is grouped with the main text. If you deselect and select the item again, both items will be selected. Right click and choose Separate to separate the items.

Select only the blue outline, then Copy (CMD + C) and Paste Back (CMD + B). Hold down the SHIFT key while pressing the duplicate at the bottom and the right. Creates a selection of both blue shapes, then creates a blend under the Object> Blend> Create menu.

Return to Object> Blend> Blending Options and change the settings in Steps specified and enter a high value to create a smooth transition between shapes.

Create a copy of the entire merge element and paste a duplicate.

Change the fill color with a red of the palette (# d55239), then hold down Shift and move the outline twice the distance to extend the layout.

Repeat the process of pasting a duplicate with the CMD + B shortcut, then alter the color (# e4ba7d this time is yellow-brown) and push it into place to continue the striped effect.

Make sure each new strip is offset by an equal number of pushes down and to the right to keep the stripe aligned. The last color for this illustration is a pale green of # 92aba3.

All the main letters have been separated with the Separate command previously. Select them all and use the Path Processing panel to join them.

Copy and paste a duplicate of this element back into it, then give it the same pale green fill color (# 92aba3). Push it down and right twice without holding down the Shift key this time.

This method of creating a design from the shapes is my natural process, but it permanently produces the work of art. Any change to the wording would mean re-creating it from scratch. Here is an alternative approach that uses only the Aspect panel by layering a series of fills and strokes.

Rewind directly to where we had a clean piece of type in an editable text element.

Make sure you have the Visible aspect panel, because that's where we'll do all the work for this method. Change the fill to light beige (# f3e1c8), and then apply the dark blue outline color (# 374160) as a stroke. By default the stroke appears above the fill, which means you can see the outline of each letter. Drag this stroke under the fill in the Appearance panel.

Increase the stroke weight to 20pt to produce the same effect as the previous offset path. To simulate fusion, we can instead use the Transform effect from the FX menu at the bottom of the Appearance panel.

Enter 1px in both the Horizontal and Vertical options, and then apply 20 copies at the bottom of the settings.

To add each different colored strip, you can apply a new stroke from the menu at the top corner (or the icon at the bottom of the panel). With the Appearance panel you can overlay numerous strokes on an element.

Change the color of this second stroke in red (# d55239). The stroke is stacked above the blue section, then drag it below.

Apply a Transform effect and insert the same Move 1px figures, but this time add 40 copies to extend the effect twice as far as it protrudes from behind the blue stroke.

Repeat the process with a new stroke for yellow (# e4ba7d). Drag it under the others and then add 60 copies in the Transform settings.

The fourth stroke is green (# 92aba3), which is placed at the bottom with 80 copies in the Transform effect options.

Add a new fill to create the thin offset green text in the original artwork.

Drag this new green fill under the beige fill, but keep it above the blue stroke.

Apply a Transform effect, using the 1px offset values, but this time with only 2 copies.

This alternative method produced the exact same piece of art, but using only the Aspect panel rather than a collection of tools for creating Illustrator shapes. The main difference is that you can still change the text to change the wording, all the effects will remain applied to the type. You can even save these effects as a Style to apply them to any other element with a single click.

Since we have modeled this text effect on my Washed & Worn plots, we could also use one of these plots. To apply a texture in Illustrator, click Make Mask in the Transparency panel (group all objects if you use the first method).

Click the square thumbnail on the right in the Transparency panel to activate the mask, then drag one of the textures into Illustrator or use the File> Insert command. Scale and move the plot in place. Click on the square thumbnail on the left to exit the mask mode.

The texture of the mask will point non-destructively to the details of the work of art to allow any background in which it is placed to show itself, giving it an aged and anguished look like an old t-shirt print.

Source link


  1. certainly like your website but you have to check the spelling on several
    of your posts. Several of them are rife with spelling problems
    and I in finding it very troublesome to inform the truth
    however I will surely come again again.

  2. I blog often and I seriously thank you for your content. The article has really peaked my interest.
    I will bookmark your blog and keep checking for new details about once
    a week. I subscribed to your Feed as well.

  3. I don’t know if it’s just me or if everybody else encountering issues
    with your site. It seems like some of the text in your
    content are running off the screen. Can somebody else please provide
    feedback and let me know if this is happening to them as well?

    This might be a issue with my internet browser because I’ve had this happen previously.

  4. Thanks designed for sharing such a fastidious thought, piece of writing is nice, thats why i have read it completely

  5. I just like the helpful information you supply to your articles.

    I’ll bookmark your weblog and take a look at again here regularly.
    I am quite sure I’ll learn plenty of new stuff proper here!
    Good luck for the following!

  6. Hi, i feel that i saw you visited my blog thus i came to return the prefer?.I am trying to in finding issues to enhance
    my site!I assume its good enough to use some of your ideas!!

  7. I enjoy looking through an article that can make
    men and women think. Also, many thanks for allowing me to comment!

  8. I think this is one of the most significant info for me.
    And i’m glad reading your article. But should remark on some general things, The web site style
    is ideal, the articles is really nice : D. Good job, cheers

  9. Hi to all, since I am actually eager of reading this webpage’s post to be
    updated on a regular basis. It consists of good information.

  10. First off I would like to say great blog! I had a quick question in which
    I’d like to ask if you don’t mind. I was interested to know how you center yourself and clear your
    thoughts prior to writing. I’ve had difficulty clearing my
    mind in getting my thoughts out. I do take pleasure in writing but it just seems like the first 10 to 15 minutes tend to be wasted just trying to
    figure out how to begin. Any suggestions or hints? Thanks!

  11. What’s Taking place i’m new to this, I stumbled upon this I’ve discovered
    It positively useful and it has helped me out loads.
    I hope to give a contribution & aid different customers like
    its helped me. Great job.

  12. Great beat ! I wish to apprentice at the same time as you amend your website, how could i subscribe for a weblog web site?
    The account helped me a appropriate deal. I had
    been a little bit acquainted of this your broadcast provided
    bright transparent concept

  13. Hurrah, that’s what I was searching for, what a data!
    existing here at this website, thanks admin of this web site.

  14. Hurrah! At last I got a webpage from where I be able to genuinely
    obtain helpful data concerning my study and knowledge.

  15. I loved as much as you will receive carried out right
    here. The sketch is tasteful, your authored subject matter stylish.

    nonetheless, you command get bought an nervousness over that you wish be delivering
    the following. unwell unquestionably come further formerly again as exactly the same nearly a lot often inside case you shield this hike.

  16. Great web site you’ve got here.. It’s difficult to find quality writing like yours these days.

    I really appreciate individuals like you! Take care!!

  17. A motivating discussion is definitely worth comment.

    I do think that you should write more about this issue, it may not be a
    taboo matter but typically people do not talk about these issues.

    To the next! All the best!!

  18. Hey there! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly?
    My website looks weird when viewing from my iphone 4.
    I’m trying to find a theme or plugin that might be able to fix this issue.
    If you have any recommendations, please share.
    Thank you!

  19. Hi there friends, nice paragraph and fastidious urging commented here,
    I am genuinely enjoying by these.

  20. I’m not that much of a internet reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your website to come back down the road.
    Many thanks

  21. Pretty component to content. I simply stumbled upon your web site and in accession capital to claim that I get in fact loved account your
    blog posts. Anyway I will be subscribing on your
    augment and even I achievement you get right of entry to constantly quickly.

Leave a Reply

Your email address will not be published.