Waldemar von Kozak is a professional digital artist from Russia, who has created some great illustrations which have a high level of funny sense and glamour. He is just great at handling the lines and colors in his magnificent works which are having some really good 1930’s styles.
Etienne Chaize lives and works as a freelance digital artist in Strasbourg, France. He loves to explore 70’s and 80’s to feed his passion for retro-futurism and is well-known for eye-catching designs of vintage style chrome text effects carrying pixel perfect details with an established blend of bright and vibrant colours.
In this tutorial, i will show you how to create a simple and clean vintage style logo using Inkscape using very simple and straight-forward techniques for drawing and illustration in vector programs. Let’s get started!
Inkscape is a relatively young yet fast evolving generic vector graphics editor in the lines of Adobe Illustrator and Corel DRAW. The application can be run on Linux, Windows and Mac and it’s freely distributable along with source code. Its main file format is SVG (Scalable Vector Graphics, a W3C standard recommended for publishing vector graphics on the Web).
If you would like to download Inkscape, go to inkscape.org. If this is your first time using Inkscape, I recommend that you complete a few of the tutorials that come bundled with Inkscape first to get the hang of how the program works (available from the Help menu).
Before going into the tutorial, let us see how the final image will look like.
Step 1: New Document
Create a new document in Inkscape with the default settings.
Draw a circle using the Ellipse tool from the toolbar from the left hand side of the screen or press F5.
Draw the circle holiding down the Ctrl key (Cmd on Mac) to get a perfect round circle of any size as shown below with the default colors for the Fill and the Stroke.
Now open the Fill and the Stroke Options using the menu Object -> Fill and Stroke or press Ctrl + Shift + F (Cmd + Shift + F for Mac).
Now we have to rotate the circle, for that click on the circle to select it and click again it to toggle the rotation handles. Rotate the circle for about 45 degrees clockwise.
For the shortcut for rotating an object in the canvas, press the “]” at once the circle is selected to rotate it about exactly 15 degrees clockwise, and the “[“ for 15 degrees in the anti-clockwise direction.
Now duplicate this circle using Edit -> Duplicate or using Ctrl + D (Cmd +D for Mac). Change the Fill Color of the duplicated circle to RGB(43,17,0) or #2b1100 using the Fill and Stroke Options.
Now resize this circle to a smaller size about 4-5 pixels using the selection handles and dragging them down while holding the Ctrl + Shift (Cmd + Shift for Mac) keys.
Press Ctrl + D to duplicate the circle again and resize it again to a smaller one. For reference see the image below.
Change the Stroke Width of this smaller circle to 3.0 px using the Fill and Stroke Options.
Duplicate this circle again to about half the size of the previous one. See the picture below for reference.
Set the Stroke width of the new circle to 5.0 px
Duplicate and resize it again to a smaller one.
Set the Fill Color of the new circle to RGB(204,204,204) or #cccccc.
Drawing the Ribbon
Now its time to draw the ribbon, for that Turn on the grid in the canvas using View -> Grid”#” key.
Now pick the Bezier curve tool from the toolbox or press Shift + F6
Also turn on the Snaps to Grid which will be available below the menu bar or at the right hand side of the canvas once you selected the Bezier curve tool. This will be turned on by default so don’t bother if you can’t find that option.
Now draw a ribbon like structure above the circles aligning exactly using the grid , you just have to click and drag along the grid as given below in the image, it is very easy even for a person who haven’t used the Bezier tool before since the path will be perfectly aligned using the Grid, release the mouse once finished and we will get a perfect ribbon.
Now fill the path with the color RGB(0,128,128) or #008080 using the Fill and Stroke Options panel.
Remove the color for the stroke as we won’t be needing any color for it For this select the No paint option for the Stroke under the Stroke Paint tab.
Now duplicate the ribbon and change the stroke color to white for the the new ribbon. This will serve as the border for the ribbon.
Set the Stroke Width to about 5.0 px for a thicker border for the ribbon.
In order to get the border, we have to reduce the size of the duplicated ribbon a little bit smaller than the original, for this we are going to use the Inset option for the paths, using Path -> Inset. Repeat this step for about 3 to 4 times or as long as you like.
Inset & Outset Shortcuts
For insetting the path, use the Ctrl + ( and for outsetting use Ctrl + )
Now the logo will look like this, you can turn off the grid since we will be no longer needing it or simple press the # key to toggle the grid.
Now add the text you want in the logo, use any bold font of your choice and White for the color.
If you want to align your text to the exact center of the ribbon, select the two objects the ribbon and the text and open the Align and Distribute Options from the menu using Object -> Align and Distribute or press Ctrl + Shift + A and press the Center on Horizontal axis and Center on Vertical axis with the option Selection in the Relative To dropdown.
Now duplicate the text and fill it with a strong brown color RGB (128,51,0) or #803300.
Send back the duplicated text to serve it as a subtle shadow for the title using Object -> Lower or just press the PageDown once. Nudge the shadow text about 1 px to the right and 1px down using Right and Down arrow keys.
Now its time to add some fancy text , some rounded text along the logo. For that draw a circle separate somewhere in the canvas with Black as the Stroke and No Fill
Add your text to the canvas also with any choice of your font and size beside the circle. We are going to put the text on the path of the circle.
Now select both the circle and the text, go to Text -> Put on Path.
Now the text is on the flow of the path but it is somewhat not in the position we intended for , for that you have to rotate it to get to the preferred appearance as you want , with the selection still on rotate the text and the circle. Use the image below for your reference.
Tips for handling the text on path
Once a particular text object is put on the path, if you want to change some orientations for the text, we need to directly do the same on the path and not on the text, say if you want to rotate the text, you have to rotate just the path and the text will be automatically updated in its position. You can do the same with changing the size, moving the object , rotation, etc.,
Its time to place the text on to the logo, before that select only the text and change the color to White, drag it down and place it above the ribbon as shown below.
If you feel the text somewhat overflow the ribbon part, just change the font size to a smaller one and adjust the text again to place it exactly above the ribbon.
Now we don’t want the path on where the text is rounded about, so we are going to hide it from the canvas, right click the circle and select Object Properties from the menu and check the Hide option in the properties window at the bottom.
We now add one more text in the same fashion and place it below the ribbon, create a circle with black stroke and no fill, add some text , select both of them, go to Text -> Put on Path
Drag just the text down, change the color to White, place it below the ribbon, we now face an issue the text is actually reflected once it is put on the circle path, we don’t need that.
To keep it straight, select the path (circle) and flip it horizontally using Object -> Flip Horizontal or just press H key once.
Now if you feel that the letter of the text is too close, just adjust the Kerning settings in the toolbar options once you select the text.
Finally adjust the font size if it is looking too big and position the text appropriately below the ribbon, hide the circle path as we did previously and we are done.
We’re finished! Hopefully you’ve picked up a few new techniques and had fun while doing so. Please share any of your personal creations in the comments for others to see!
In today’s tutorial, we are going to create a vintage style flyer in Photoshop by adding some of the most basic visual components of retro artworks using filters and distortion techniques and finally polish our design with some old grunge textures…
Final Image Preview
Before you start take a look at the final image you will be creating.
Step 1: Create a new document
Open a new document in photoshop of size 800 by 1200 px using the default settings. Set the foreground and background colors to #ad2321 and #fce8ab respectively. Fill the default Background layer with the background color set.
Step 2: Background Texture
Open up the texture3.jpg from the downloaded pack of vintage style textures. Copy the texture and paste it into a new layer and then resize it to fit the canvas. Set the blending mode of the layer to Multiply.
Step 3: Making the Sunburst effect
Now we are getting into the important part, i.e., making the retro sunburst effect. There are hundreds of techniques available to create that kind of effect. So i have written a post for the same and listed some of the best available methods here. For our tutorial, we are going to create it using the Halftone filter.
Create a new layer.Before that make sure you set the foreground and background colors as mentioned in the first step. Go to Filter->Sketch->Halftone Pattern. Use the following settings:Size = 12, Contrast = 50, PatternType = Line.
Step 4: Rotate and Transform
Now we are going to rotate and transform the halftone layer using Edit->Transform->Rotate 90 CW.
Resize and stretch the layer to fit the canvas.
Step 5: Applying Polar Coordinates
Here comes the final part in making the sunburst effect. Now apply a distort effect of Polar Coordinates by Filter->Distort->Polar Coordinates using the option Rectangular to Polar
Step 6: Adding the Text
Create a new layer and add some text using the color #430a01. The font i have used is Rockwell, there are many retro and vintage style fonts available for free download from sites like DaFont, you can use any of them on your own. Apply the stroke effect for the text using the layer styles dialog with the stroke color as #fef7ca using the following settings.
Step 7: Applying textures
Open up the file texture1.jpg from the texture pack, copy and paste it into a new layer. Resize it to fit the canvas and apply the blending mode for the layer as Overlay.
Similarly, open up the file texture4.jpg from the texture pack, copy and paste it into a new layer. Resize it to fit the canvas and apply the blending mode for the layer as Multiply.
Step 8: Adding the shapes
Now you can add some additional text and shapes as per your taste and don’t forget to apply the stroke effect we have applied previously for all the text and your shape layers.
Step 9: Making the border
Create a new layer called border for the poster border. Select the canvas by pressing Ctrl/Cmd + A or Select->Select All. Now transform the selection using Selection->Transform Selection, decrease the width and height of the selection to 97% and 98% respectively.
Now inverse the selection using Ctrl/Cmd + Shift + I or using Select->Inverse. I think now we got the poster border. Please ensure that we are still working on the border layer, if not click on the border layer, and fill with a 50% grey color from the swatches or you can use any color of your choice, it doesn’t matter much, please see to that your border color blends well with the poster.
We’re finished! Grunge textures, typography stroke styles along with a sunburst background are the most common visual elements which make our flyer seems to have some authentic vintage appearance. Hopefully you’ve picked up a few new techniques and had fun while doing so. Please share any of your personal creations in the comments for others to see! You can view the final image below or view a larger version here.