|Designing vintage posters with Illustrator and Photoshop.|
|Scritto da Roger99|
|Venerdì 20 Gennaio 2012 10:16|
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.
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.
There are several collections of posters or reinterpretations for inspiration.
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.
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.
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.
The screen that we see on the strip of paper imitates the old low-cost printing.
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.
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.
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:
ARTICLES ABOUT THE WEB DESIGN:
VINTAGE ILLUSTRATION ARCHIVES:
Have you found this article helpful? Then click here and donate.
Did you like this article? Please share it on Wikio:
|Ultimo aggiornamento Domenica 05 Febbraio 2012 20:00|