For this tutorial we teamed up with New Garden Society in order to show you how to design a Logo inspired by the Victorian Era. We show how to combine font styles and ornamental elements to a coherent label design.
March 09, 2021
HOW TO DESIGN A VINTAGE BRAND LOGO
"For this tutorial we have used the “Vintage Font Bundle”. It includes various fonts and great collection of carefully crafted graphic elements.
We have used it in Adobe Illustrator CS5 (on PC), and it worked perfectly! Although it is usually easier for us to start our creation with a sketch, having the “Vintage Font Bundle” actually allowed us to create this without any drawing."
The goal for us was to create a typography based logo design for our “New Garden Society” studio, with intricate details around it. Hence it started with choosing the right font for us. Our choice was “Royal Signage”. Next step was to determine the right layout for this.
Having this as a base inspired us to make further adjustments. First thing was to expand the words (selecting the group and clicking Object > Expand Appearance). Then, do the same again, choose “Expand” and press "OK". Make sure you hit "Expand" twice, because one is for the Fill, and one is for the Stroke of your type selection.
Capital letter N was used at the end of Garden and we figured it would provide a better balance if we flip the "N" vertically so that the flourish was at the bottom right as opposed to the top left. One of the ways to do so: using Direct Selection Tool (A on your keyboard) select the letter N you need to rotate. Change to regular Selection Tool (V), move your mouse just a bit outside of the corner of your selection, hold down Shift and rotate it 180 degrees.
Next thing we decided to do is to arrange rising appearance of the “Garden”. Since we liked the balance of the shapes in these gorgeous letters G and rotated N, we wanted to avoid distorting it in any way. That's why we apply rise effect only on “ARDE” part.
We have grouped those four letters (select all 4 with Selection Tool and press Ctrl + G on your keyboard; Ctrl or Cmd + G means to create a group; you can also achieve this by right clicking and select Group.) To arrange this effect, select the group and go to Effect > Warp > Rise. 30% on horizontal rise did the trick for us.
To add some more coherence to this design, there are few things we have rearranged such as extending descender/tail on the letter R, subtle lowering leg on the N in “New”, scaled down a bit letter N in the end of “Garden” and scaling up the letter G in “Garden” a bit . Also, the kerning on Society is rearranged (more space between the letters), and detail from the letter N is incorporated into letter A.
In the next step, we have added a nice drop shadow to New Garden part of the words. First we have made a Group out of New Garden (select those letters then press Ctrl + G). Then we have copied it and pasted in front (Ctrl + C & Ctrl + F). After that we need to right click on that and choose: Arrange > Send Backward (so it is right below the main lettering). Give it a black color and add a black stroke in a width you like. While that is chosen, repeat the previous process (Ctrl + C & Ctrl + F then right click on that and choose Arrange > Send Backward). Change the color, move it a little bit to the side and lower the stroke thickness. The result should be as in the image above.
Important addition is to repeat the process with now colored letters, add another copy, send backward, change it to black and add more thickness to black stroke on it. We did it so we can add elements behind and still keep the letters appear clear in front of everything. Keep in mind that if you switch your background colors, you will need to change your stroke to match giving it that spaced shadow effect.
Since we got what we think is looking good as a base, we have proceeded to choose various Frames and Single Elements from “Vintage Font Bundle” pack.
First thing we wanted to add is a line above and below the Garden so we can further emphasize the flow, and, voilà, within the Single Elements file we have found even those lines. :) Just a subtle rotation and positioning of the two and there it is. Nicely placed behind everything.
In the “Frames” file from the “Vintage Font Bundle” pack, you can find a lot of great pre-made frames and we have decided to go with one of the circle designs that resonated the best with what we are trying to achieve. It is positioned completely behind lettering (right click on that and choose Arrange > Send to Back), and positioned in a way to make letter G the center of it.
At this point we had a pretty clear idea of how this needs to be completed. The goal is to create symmetrical appearance on both horizontal and vertical axis. One of the ways to achieve that is to create solid object above everything, and wider than everything and to create a solid object left of everything, taller than your composition and perfectly aligned with circle used behind G. The lettering composition is already perfectly horizontally aligned with the center of the Artboard (Window > Align, be sure to have “Align to Artboard” checked, and click “Horizontal Align Center”).
This means that we can create a simple, wide rectangle above this and place it in the horizontal center of the artboard as well (Rectangle Tool (M), holding right click on your mouse and drag it across the artboard).
To create a solid object to the left of everything and perfectly aligned with the circle, you can repeat previous step creating rectangle and aligning it with the artboard on the vertical axis (Window > Align, be sure to have “Align to Artboard” checked, and now click “Vertical Align Center”).
Since we want the circle behind G to be the center of vertical symmetry, align the circle on vertical axis as well (the same way as explained in previous sentence).
Re-position the letters on vertical axis (if necessary) so the letter G is positioned directly above the circle. Now we have everything in place to continue playing with and adding more ornaments.
We have found a number of great single elements that fit in this design perfectly. Those are positioned around and in the circle. Now we want to use those elements on the upper half of the circle and copy those to be a mirror image on the lower half of the circle. That is where that circle on the left (now ellipse) comes in play. The elements on the upper half of the circle are grouped, copied and pasted directly in front (Ctrl C > Ctrl F). That copied group is selected together with the rectangle to the left. Operation that follows is Object > Transform > Reflect and then choose to reflect on horizontal axis and click OK. Everything is perfectly mirrored now and set in desired place! Now we are getting somewhere. :)
Next goal is to use the circle with all of the ornaments around and in it, and reflect it to the right. Using the same process as previously explained, we group everything, duplicate it, but now we use the rectangle above everything. Via Object > Transform > Reflect, we choose to reflect on vertical axis and click OK.
Since we are satisfied with the main arrangement on the horizontal axis of this design, it is time to discover what would be the best details/ornaments to place on the vertical axis of this design.
The process for mirroring these is the same as it is explained in previous part so here is how it looked after adding those here and there.
Having this composition defined, we have concluded that there is a bit of space for some wording to be added within the right circle. We have arranged Graphic Design Studio using Blackriver Bold font from this great bundle. We did so with using “type on a path" tool within the circle that is perfectly aligned in the right ornament circle. Novi Sad, Serbia is also added using Blackriver Bold font.
Couple of details are erased, some shades are added (using the same copy-paste logic used in the original explanation on how to add shadow to the letters). Also, in the right ornament circle, inner ornaments are slightly rotated so those fill in the space above the added letters. Main letters are filled with the hand-drawn inner lines (using pen tool and mouse). Here is the final work:
This pretty much sums up the process for creation of this design. For any of the actions explained above, there are more ways of achieving the same goal. Therefore this is just one of the ways how you can use these in your Adobe Illustrator. There are so many different elements in this bundle that you can use to create a LOT of nice designs.
Just pick and choose the ones you like and play with those as you like. This was our choice for now. :)
You are a big admirer of vintage logo designs?
Don't miss our collection of 200 ready-to-use logo templates, created by professional designers to speed up your creation workflow. All templates are prepared for Adobe Illustrator, Photoshop and Affinity Designer.
6 comments
I just followed this tutorial and made the AWESOMEST logo I’ve designed in my entire career for a new restaurant opening by me. The owner specifically wanted old-style black lettering and I had no idea how to start the project. I was able to design my logo from start to finish in 4 hours.
Alexis
December 13, 2021
Is there any way to just use one of the labels already made and just change the words in them – or do you have to start from scratch -
Catherine Freimann
August 10, 2021
can the line colour of the ornaments be changed?
ann mcdonald
August 05, 2021
Can I use AI for iPad to manipulate these features? How do I download all the vectors onto my ipad?
JPJ
July 27, 2021
Thank you for the mini walk through. This helped me greatly with the basics I did not know how to create. As a new company on a shoestring budget we are working through many items our self, including designing a logo.
Julie J
April 23, 2021
WHY CANT I SEE THE HERITAGE FONTS IVE PURCHASED ON MY PHOTOSHOP CS6 ? THAT WAS THE LAST PHOTOSHOP ON DISC. I TRIED EVERYTHING TO PUT THEM IN THE FOLDER, BUT YOUR HERITAGE FONTS IS NOT SHOWING, IS ADOBE BLOCKING YOUR FONTS? IM USING A MAC DESKTOP .
CYNTHIA
April 10, 2021