Save The Date Postcards – A Step-By-Step Illustrator Guide
Making your own Save the Date cards is fun and easy, and once you know the basics of Illustrator, you can let your creativity run wild! I have designed a few different cards with step-by-step instructions for how I did them, so you can just follow along and create the exact same layout on your computer. They really don’t have to match your invitations, but if you want them to, go ahead and make them as well. You can use the same techniques for anything.
This guide assumes that you have a (very) basic knowledge of Illustrator, or have at least played around with it a little bit. Please make sure you read these Illustrator notes/problem solvers first, and you might also want to take a look at the Illustrator Toolbar.
Illustrator uses and creates vector files (which can be resized and warped without losing any sharpness at all). There are tons of free vector art available online, but before downloading anything, read through the licensing rights. It’s usually clearly stated, and while many will let you use their designs for free for your own personal use, not everyone does. And if you plan to do something else with them, make sure you know what the deal is, and play by the rules. You wouldn’t want someone stealing your work that you put all that work and time into.
OK, let’s get started on our first card, which I call Elegant Pink
For this first card, I got my background pattern from createsk8.com. It is by jlwdesign and it’s called the “Elegant Vines Pattern” (you can get it here). Read the License and Usage Info.
1. After you download your design (make sure you select the Adobe Illustrator CS download option), open the ai (Illustrator) document in Illustrator. You might encounter a few error messages: just hit OK and/or CONTINUE and/or OPEN, it doesn’t matter.
2. Select the color block you want with either the selection 
or the direct selection 
tool (for this particular design, you want to click on the tiny square you want with the direct selection tool, and while it’s selected, immediately click on the selection tool in the toolbar. This assures that you get the entire square copied, and not just part of it). Copy it by either going to Edit – Copy or by pressing Apple+C (Cntrl+C for PCs).
3. Open a new illustrator document (can be any size, we’ll worry about that later)
4. Paste your selection in your new document (by either going to Edit-Paste or by pressing Apple+V (Cntrl+V on PC)
5. select the rectangle tool 
(your arrow will turn into a small cross), click anywhere on the page
6. a window will pop up where you fill in the dimensions of your new box (I made mine 6″ wide by 4″ high).
Your chosen pattern will automatically fill your new box. After your 4×6 box shows up, make sure you delete the tiny square you copied on the page (by selecting it and hitting Delete). 
7. Make sure your new box is selected (you’ll know it is if you see tiny white squares in the corners and on the sides of the box) and set the opacity to 40
8. Add a new layer and lock the bottom layer (with your vine design box in it).
9. With the rectangle tool 
selected, click anywhere on your second layer to make the photo box (I made mine 2.5×2.5″)
10. To make the frame pink, make sure your new box is selected (it will probably be filled with the vine pattern, don’t worry about that), go to the color palette and make sure you’re coloring the 
stroke, not the fill Type in the values for the color you want (I used R 216, G 178, B 173 If your color palette is displaying something different than RGB (CMYK for example), go to the fly out menu and select RGB
I used a 1 pt stroke for the width of the frame. If you want it thinner or thicker than that, go to the Stroke menu and type in the value you want To fill it with white (I find it helpful while working on the design), make sure the “fill” box is in front on the color palette and click on the little white box in the lower right hand corner
11. Create another layer and lock the others
12. Select the rectangle box again to make the pink “ribbon”. Like before, click anywhere on the page and type in the dimensions (I used 2×4″)
13. Fill with same pink as frame ((R 216, G 177, B 173)
14. Set opacity to 65
15. If you want to move it on top of the background box at this point, double check so that the layer with the background box is locked, select the ribbon (with the Selection tool) and pull it on top of the box (by pressing down your right mouse button and dragging).
16. Make a new layer and lock the others.
17. Select the Type tool 
and click anywhere on the page (if you want to type on top of the ribbon to see what it looks like, make sure that layer is locked)
18. Type your text (I used Myriad Pro, 14pt, bold)
19. Unlock all layers
20. Select background box and ribbon box and align them on top (”vertical align top”)
21. To add your photo, create a new layer, right underneath the frame layer and lock all others
22. In your new layer, go to File – Place and select your photo
23. Resize it by pulling the handles (hold down the shift key while dragging in one of the corners – this will keep it proportional) or by left clicking on your mouse and selecting Transform – Scale and type in a smaller value. If you know the exact size you want it to be (which we do here, since it needs to fit right underneath the frame, make sure you’re photo is selected, and up top, just beneath the File, Edit etc. headings, you will see two windows with an W and H in front. Just type in your dimensions here (2.5×2.5″).
24. Unlock the layer with the photo box
25. Select both the box and the photo and align them
26. Make the box transparent There’s your photo in the frame! Tip: to keep the photo and frame together so you don’t accidentally move one without the other, select them both (the easiest way to do this is to make sure all other layers except these 2 are locked and with the Selection Tool, pull and drag around the boxes until both are selected) and go to Object – Group (or you can left click and select Group).
This may seem like a lot of steps, but once you know it, you can put a card together in a few minutes. If, after going through the step-by-step instructions you have any questions, please feel free to contact me.
Related posts:
- Hummingbird Save The Date Card – A 12-Step Illustrator Tutorial This time, I thought we’d expand on our growing Illustrator...
- “Funky Chic” Save The Date Card – An Illustrator Tutorial Today’s Save the Date card is very easy to make,...
- Make Your Own Engagement Invitations – Another Illustrator Tutorial With the holidays (and soon Valentine’s Day) behind us, I...
- Make Your Own Save The Date Cards Using Microsoft Word In today’s tutorial, we’re using Microsoft Word to create a...
- Engagement Announcement In Purple, White And Gray – An Illustrator Tutorial This is part 3 in my series of tutorials for...
Related posts brought to you by Yet Another Related Posts Plugin.
Filed under Illustrator, Save The Date, Tutorial | Comments (2)2 Responses to “Save The Date Postcards – A Step-By-Step Illustrator Guide”
Leave a Reply
[...] descriptions of how and when to use these tools in my step-by-step Illustrator guides (”Elegant Pink“, more to come), this is just a quick overview so you can get a visual of the different tools [...]
[...] the Date card is very easy to make, in spite of its intricate design. If you didn’t try my first Save the Date-tutorial, I would suggest at least reading through it before starting this one, just because I describe [...]