Create a poster with vintage-style graphics for Bert's room.

Mix between Illustrator and Photoshop to simulate a real 50's print with paper yellowed, aged photos and drawings in comic style as in the best American tradition.

A fast introduction to the job.

In the first part of this tutorial (in Italian) we discussed the layout of the website needed topromote the episode titled "The Bert's Chronicles" in which Positec - leading manufacturer of electric tools - both for the professional to the hobbyist - illustrates the many advantages that his tools (and exclusively electric smog) for gardening havecompared to competitors like BOSCH, BLACK & DECKER, MAKITA and more.

Positec also manufactures power tools for woodworking, masonry, and metal and sells garden tools and more kind of power tools with brands ROCKWELL and WORX.

Bert is a moody person and always apprehensive for his garden chosen to represent the fears of an average user linked to manias for the garden and the traditional but uncomfortable and pollutants tools.

I imagined how it would have been the habitat home and I thought to show the ecologist video messages, through the Bert's television.

So I simply set up the living room wall in his home filled by vintage and archaic british lifestyle items pervaded by traditional obsessions.

Let's start the job.

In this third part of the tutorial entitled: Graphics for a website in vintage style (use Google translator) we're going to learn some techniques are particularly suitable for imaging in vintage style which is used for the creation of posters of Bert's room that will be soon, the new website where will be possible watching the Bert's chronicles sat with worx tools standing in the comfort of the Bert's sofa.

First we need a little research on the web as we have seen has rewarded our hopes to find stimulating materials.
We can try some of the next keywords on Google: vintage ADV, vintage commercial, vintage poster, vintage styled poster, steampunk poster, etc..

There are several collections of posters or reinterpretations for inspiration.
In my research storage, I regularly create files containing dozens and dozens of graphic files that break it down by gender.
One of these is dedicated to posters and flyers, another is dedicated to vintage in general.

To give a face to the graphic.

From our research (or archive) are not only emerged posters designed, but also From our research (or archive) are not only emerged posters designed, but also subjects to be used in our posters or advertisements to appear in the Bert TV.

The work of imitation of this kind of graphics begins from Illustrator. With Illustrator we are going to give to the sketches a comic style but with an old style.

I use the pen, brush and pencil to reproduce the faces that I chose during the casting I've worked browsing the gallery of faces collected during my research. to be used in our posters or advertisements to appear in TV.

The work of imitation of this kind of graphics part from Illustrator. And 'we are going to get with this style of drawing comics to be given to interpreting the history of our brand-new illustrations, but with an old style.

I use the stylus (pen), brush and pencil to reproduce the faces that I chose during the casting I've made browsing the gallery of faces collected during my research.

During processing the use of tools may cross, or, for example, create a track that I customize with a particular brush stroke. So it combines the precision of the stylus (pen) with the freshness of the brush stroke.

I choose specifically to create simple drawings and even a bit rough, almost childlike to give more innocence, sometimes typical of the old times, my final graphics.

Click on commercials Ai blog does not cost you anything and will help the blog to exist.

To give the right... character.

Now we need the fonts better suited to this type of work.

In my font manager (but also in my collection stored in the HD or CD) I worked on the subdivision by type in order to be able to immediately identify the font best suited to each job.

In this case I used a Times New Roman and a nice Bodoni Style Two were in vogue in the institutional pages, and then some from among the following that I'm going to recommend: Brody, Advert, Redressed, Dancing Script, Mister Television, etc..

In questo caso ho usato un Times New Roman ed un bel Bodoni Style Two tanto in voga nelle pagine istituzionali dell'epoca, e poi alcuni scelti tra i seguenti che vado a consigliare: Brody, Advert, Redressed, Dancing Script, Mister Television...

Help us improve this article. Report other vintage fonts (and download sites from which) you have found useful for your poster.

I Like it!

Let's Add a detail that improve the page and invite users to click on Facebook to share his appreciation of Bert's web page.

How to reproduce the screening effect.

Perhaps the video tutorial that explains how to create patterns for comics in this case is not the most suitable as screening that we need to because the net that help us to create does not provide an inclination of 45° points but alignment that don't works well.

Sure, we could create a large shaded area, tilt it of 45 ° and then disguise it, or delete the excess.

But what we must to get is something like:

The screen that we see on the strip of paper imitates the old low-cost printing.

Let's see how you get in a few seconds with Photoshop.

Do you find this article helpful? Then click here and donate.

Before to treat the artificial screening let's download from inFernet the sheet of paper that go to make up our manifesto.

For our image search (possibly large) choosing some keywords such as: old paper, vintage paper, torn paper, paper texture, or let's download something from sites suitable textures like CG-Textures.

When you open the paper in Photoshop we can proceed such as following:

1_ On a new layer, draw a rectangular selection

2_ we are going to fill with a gray that you like;

3_ remaining on the level of the gray pattern we operate as follows: General Menu> Filter> Pixelate> Color Halftone ... and we set the values ​​of the inclination of dithering all at 45°, while the radius of the filter will vary depending on the size of the single point that we want to achieve that depends on the following factors: resolution of the file on which we are operating and by the gradation of gray choice (more clear is the color and the greater the distance between the points and reduced is their diameter and vice versa with a darker gray).

4_ Using the magic wand - tolerance set to 100% - we select of the white between the dots and erase it, then select the dots clicking, as already mentioned several times in the previous part of this tutorial, the icon of the level on which we are operating while pressing cmd / Apple (ctrl on PC) and we change the color as we like.

I suggest you try the many offerings from varienti 5 customizable fields. For some or all parts (pictures included) of the manifesto can be applied to the screening effect at the end of the work to make a further pushed fiction. In this tutorial we introduce the use limiting to a simple gray background.

Composition of the poster.

Once produced all content, with Photoshop or Illustrator, I start to compose the poster inspired by a series produced by the Brazilian agency named Moma Propaganda.

1_ On paper we make the screen as explained.

2_ Duplicate the level of the screen, then change color and I keep only the part which will contains the main illustration.

3_ Insert the picture by cutting and pasting from Illustrator.

4_ I select the picture by clicking on the icon of the level and hold down cmd / apple (CTRL on PC), I expand the selection: General Menu> Select> Modify> Expand and use the selection (reverse) to mask the two levels that contains the halftone.

5_ Insert colored and masked as above background to allow the illustration to emerge more.

6_ Insert title (Facebook) and Footers.

7_ Duplicate the title layer and turned it into a shadow downing the brightness to -100, or coloring it after having loaded the selection (as seen in section '4 '). Once changed color I move this layer below the level of the blue title (Facebook) I change the position of the text so that it will go out lower.

8_ Add the subtitle and graphics to support the sharing.

9_ As in '4' Load the selection of these elements, I expand and use this selection to change the mask of screening by adding a breathing space around the objects you already insert.

Load a selection from the two copies of the Facebook writing and, after I moved it slightly, I use it to change the main mask of screening in order to increase the visibility of the word 'Facebook' and to make further interesting this item.

10_ To increase the visibility of the subtitle I make an highlighting on a separate layer with an orange vintage obtained by writing 'Share' I had previously placed in the bottom right

Please look that all levels, excluded the one that housing the sheet of paper, needs the fusion method Multiply' to run perfectly and seem actually printed on yellowed paper thanks to the fact that in this way the texture leaks out through the colors.

Summary table of elements.

The values ​​are relative to the size of objects and the resolution of the file.

Chromatic advices:

BLUE C-72,66; M-10,94; Y-0; K-0

GRAPHITE C-50; M-62; Y-15; K-0

ORANGE C-0; M-50,78; Y-100; K-0

BROWN  C-30,86; M-58,98; Y-70,31; K- 21,88

TO READ WITH GOOGLE TRANSLATOR:

Read the first part (in italian)

Read second part (in Italian)

Read the fourth part (in Italian)

ARTICLES ABOUT THE WEB DESIGN:

25 web sites based on illustration.

25 web sites based on manual tipography.

40 web design based on chromatism.

Web design minimale.

VINTAGE ILLUSTRATION ARCHIVES:

wellmedicated.com

gawno.com

www.humanrecord.com

Have you found this article helpful? Then click here and donate.

Did you like this article? Please share it on Wikio: