In this design tutorial I will be showing you how to create an authentic Parisian storefront using a combination of Illustrator and Photoshop. We will begin by creating our text and lockups in vector format before we bring it into Photoshop where we will be applying them to a realistic storefront mockup. We will be customizing these elements and adjusting the storefront mockup to create a beautiful scene. If you are all ready to begin then open up Illustrator and let’s get started!
HAVE YOU SEEN OUR YOUTUBE CHANNEL?
Watch the video tutorial below and subscribe to our YouTube channel for regular updates direct to your inbox.
Here’s a look at what we’ll be creating:
Follow along with this tutorial: Download the freebie files
This freebie pack is just a taste of what you can expect to find in the The Professional, Dynamic Font Library Bundle for just $29 (that’s 99% off). Prepare to take your font library to the next level and have a massive impact on the quality of your creative projects!
Step 1: La Grande Patisserie Storefront Design
Let’s begin by opening Illustrator and creating a new document. First let’s go ahead and give our document a name – here I am using ‘la-grande-patisserie-elements’. From here, make your artboard ‘4” x 4”’ square and choose ‘1’ for the number of artboards. Once you have done that, click ‘Create’ from the lower right to set up your document.
Once you have your new document set up, press ’T’ on the keyboard to switch to your Type Tool and then type out the words ‘LA GRANDE PATISSERIE’. What we need to do first is make sure we can see our Character Panel so if you don’t see it you can quickly get to it by going to the Window menu and choosing ‘Type > Character’. Now that we have the panel open, let’s change the typeface to ‘Evanston Alehouse’ which is a beautiful font with a wide variety of styles from Kimmy Design. The first style we want to use here is ‘1826 Black’ which you can see highlighted in the image. For now, let’s also make our font size about ’12’ even though we will be adjusting this a bit later on.
The next thing we are going to do is change up the first ‘A’ so let’s grab our Type Tool (T) once again and then highlight this letter in our text box. From here, type a lowercase ‘a’ and then as long as your letter is still highlighted you should see a small popup that reveals a few different alternates for this character. Let’s go ahead and choose the first alternate letter which is the lowercase ‘a’ with an underline below.
Now that we have replaced the first ‘a’ with an alternate character let’s go back and adjust the kerning or space between some of our letters. We know that we will want our title to be nice and large, but some of the letters have a bit too much space between them. We could use the tracking settings in the Character Panel, but I like to go in and adjust this manually as it gives you more control over the spacing when you don’t want everything to be uniform. To start, click inside of the text box with your cursor and use the left and right arrows to move the cursor between characters. Once your cursor has been placed between two letters you can either add or reduce the amount of space between them. In this case we mostly want to reduce the space and to do that all you need to do is hold the Alt/Option key and tap the left arrow. If you need to add more space, simply hold the Alt/Option key and tap the right arrow instead.
Step 2: Subhead
After adjusting our main title, let’s create a new text box and this time type out the words ‘MAISON FONDEE EN 1925’ which translates to ‘HOUSE FOUNDED IN 1925’. Going back to our character panel, we’re going to use ‘Evanston Alehouse’ in the ‘1919 Black’. If you don’t have access to this style you can use the font we’ve used in the previous step or an alternative font from your library. We can make the size of the type about ‘8.57 pt’ and then adjust the tracking setting so that it’s set to ‘255’ as shown below:
Step 3: Sun Burst
Next, go to the File menu and choose ‘Open…’ from the menu.
Go to the freebies folder for this tutorial and navigate to the ‘EvanstonOrnaments_Sunburst_XX.eps’ file. In this folder you will find several versions of each of the EPS files so be sure to choose the one that corresponds with your version of Illustrator. Once you have done that, choose ‘Open’ from the lower right hand corner to open the file.
You should now have your sun burst open in Illustrator. Once you do, press Command/Ctrl+A to Select All and then Command/Ctrl+C to copy it. You can now close this tab or window and return to your working document.
Step 4: Centered Text
Once you are back to your main file, press Command/Ctrl+V to paste the sun burst. From here, hold the Alt/Option+Shift keys and click and drag a copy of your ‘LA GRANDE PATISSERIE’ text down as shown here:
Switch back to your Type Tool (T) and do a hard return after each word so your text is on three lines. After that, press Command/Ctrl+A to highlight all three lines of text, and then go to your Character Panel, switch to the ‘Paragraph’ tab and center the text.
Return to the Character tab and now make the text ’15 pt’ in size with ’13.61’ for the linespacing and ‘-25’ for the tracking.
Step 5: Creating Outlines
Press ‘V’ on the keyboard to switch to your Selection Tool and then click on the three lines of text to select it. From here, go to the Type menu and choose ‘Create Outlines’ to convert the live type into a shape.
Step 6: Offset Path
After converting your text into outlines, click on it once again with the Selection Tool (V) and now go to the Object menu and choose ‘Path > Offset Path…’ from the list as shown below:
When the ‘Offset Path’ dialog box appears, enter a value of ‘4px’ and check off the ‘Preview’ box to see your expanded shape. From here, click ‘OK’ to apply the changes. Once the dialog box closes we want to cut the shape by pressing Command/Ctrl+X and then paste it in front of everything else by pressing Command/Ctrl+F before moving on.
Step 7: Finding the Path
Next, go to the Window menu and choose ‘Pathfinder’ from the list.
Select your black shape on top of the outlined text, which should now be in front of everything else, and then click on the ‘Merge’ icon found in the bottom row of the Pathfinder panel. Doing this will merge this entire shape into one.
After merging the shape together, make sure it is still selected and then press ‘I’ to get your Eyedropper Tool and sample any of the white background to fill the solid shape with white.
Now we need to move this shape back one spot so that it is behind our outlined text, but remains in front of the burst. To do this you can go to the Object menu and choose ‘Arrange > Send Backward’ or simply use the keyboard shortcut Command/Ctrl+[ on the keyboard. After doing this you may notice a few small pieces of the burst poking out that look a bit strange, but we are going to fix this in the next step.
Press ‘P’ to switch to the Pen Tool and manually draw a few small white shapes to cover up any of the small parts of the burst that were poking out. You may also want to use the Direct Selection Tool (A) to manipulate a few of the points on the white shape to allow some of the lines of the burst to show through. Once you have modified the shape you should be left with a tighter looking lockup as shown here:
Step 8: Merging
From here, grab your Selection Tool (V) and click and drag around the whole burst lockup. Once you have done that, return to the Pathfinder and choose the ‘Merge’ option once again.
You should now have a simplified, merged shape like this:
Step 9: Direct Select
Now let’s switch to the Direct Selection Tool (A) and click on an area of white inside of the merged shape.
Next, go to the Select menu and choose ‘Same > Fill & Stroke’ to select any other areas with a white fill and stroke color.
After selecting all of the white areas, simply press the delete key to remove all of the white. In the image below I have placed a colored square behind the lockup to show that by merging and then removing the white, you should be left with a single color lockup that looks nice and clean. In doing this we can also now move this shape around as one solid object without worrying about anything shifting.
Step 10: Building Numbers
We will switch back to the Type Tool (T) and type out the number ’23’ using ‘Evanston Alehouse’ with the ‘1893 Black’ style. If you don’t have access to this style, you can use the ‘Evanston Alehouse’ with the ‘1826 Black’ style included in the freebie pack or an alternative font from your library. This will help to make our shop feel more authentic by incorporating a building number. Refer to the image below for the size and tracking values:
The next thing we want to do is press ‘M’ to get the Rectangle Tool, and then hold the Shift key and drag out a small black square. Rotate the square 90º and place it on either side of the number. Once you have done that, hold the Alt/Option+Shift keys and then click and drag a copy to the opposite side. You should end up with something like this:
Once you have placed your two small black diamonds next to the number, use the Selection Tool (V) to click and drag around the entire shape and then go to the Object menu and choose ‘Group’. You could also use the keyboard shortcut Command/Ctrl+G to do this.
Step 11: Frames
Next, go to the File menu and choose ‘Open’ or press Command/Ctrl+O on the keyboard. We now want to navigate to the freebies folder for the tutorial and find the ’EvanstonOrnaments_Frame_XX.eps’ file before choosing ‘Open’ from the lower right hand corner.
After opening the file, press Command/Ctrl+A to Select All and then copy it by pressing Command/Ctrl+C. You can now close out of this window, return to your main document, and paste the frame by pressing Command/Ctrl+V.
Switch back to the Type Tool and type out the phrase we used earlier – ‘MAISON FONDEE EN 1925’. Break this text up into three lines and use the same font and style that we used for our building number in the previous step. For the size, let’s make the text about ‘9.4 pt’ and set the line spacing to about ’11.28 pt’ as shown below:
After adjusting the text, hold the Alt/Option+Shift keys and click and drag a copy of the top frame down so that it’s below the text. From here, select the bottom copy of the frame and then go to the Object menu and choose ‘Transform > Reflect…’ from the list.
Once the ‘Reflect’ dialog box opens, check off the ‘Horizontal’ option for the Axis and then check off the ‘Preview’ box to make sure the frame has been mirrored correctly, which it has. Once you have done that press ‘OK’ to apply the changes.
Now that we have our three lines of text set up in between the two mirror images of the frame, add a bit of space between each element and then click and drag around the whole group and press Command/Ctrl+G to group them all together.
Step 12: Dividers
Next, go to the File menu and choose ‘Open’ or press Command/Ctrl+O on the keyboard and navigate to the ‘EvanstonOrnaments_Divider_XX.eps’ file.
After opening the file, press Command/Ctrl+A to Select All and then copy it by pressing Command/Ctrl+C. You can now close out of this window, return to your main document, and paste the frame by pressing Command/Ctrl+V.
Add a new line of text that reads ‘BOULANGERIE’ which translates to ‘BAKERY’ in French. For this we will go to the Character Panel and make sure that your text is using the ‘1893 Black’ style of ‘Evanston Alehouse’ with a size of about ‘9.4 pt’. If you don’t have access to this style, you can use the ‘Evanston Alehouse’ with the ‘1826 Black’ style included in the freebie pack or an alternative font from your library.
Click and drag around the first copy of the divider and the ‘BOULANGERIE’ text and then hold the Alt/Option+Shift keys and drag a copy down below the originals so you have this:
Do this two more times, adding space in between each of the text and dividers, and then place one last copy of the divider at the very bottom. Next, use the Type Tool (T) to change each of the other three lines of text as follows: ‘PATISSERIE’ or ‘PASTRIES’, ‘VIENNOISERIES’ or ‘DESERT PASTRIES’, and ’TRAITEUR’ or ‘CATERING’. This will serve as a list of some of the items and services that the shop provides. After changing the text, click and drag around the whole group and then use the Align Panel to vertically center all of the dividers and text.
After centering our elements, click and drag around the whole block and then hold Alt/Option+Shift on the keyboard and drag a copy to the opposite side of the artboard. You should now have something like this:
Step 13: Bonus Text
Let’s now focus on the copy that we’ve placed on the left side. We want to set this up so we only have two text boxes below the building number, with a divider above, between, and below the text. Let’s change the first body of text to read ‘PATISSERIES ARTISANALES SERVIES QUOTIDIENNEMENT’ which means ‘ARTISANAL PASTRIES SERVED DAILY’. Our second block of text will say ‘GATEAUX POUR OCCASSIONS SPECIALES’ or ‘CAKES FOR SPECIAL OCCASIONS’. Your group of text should now look like this:
Now that we have customized this group we can click and drag around the first block of text and dividers and group them together by pressing Command/Ctrl+G. After that, repeat for the opposite side where we listed out some of the products and services. We now have all of the elements we need to begin decorating our storefront and can now head over to Photoshop where we will start working on our mockup.
Step 14: Storefront Mockup
Let’s move over to Photoshop and open the ‘Paris-Amsterdam-2.psd’ file from the 30 Signs Facades Paris & Amsterdam mockup. This is just one of many beautiful files that can be found in the full mockup which can be purchased here through the Design Cuts Marketplace. Once you’ve opened the file in Photoshop you will most likely just see white, but this is simply a layer that can be turned off so let’s go ahead and disable the visibility for that first layer or remove it all together.
Step 15: Fresh Baked Bread
Now that we’ve disabled/removed the solid white layer, let’s take a look at the first Smart Object layer in the PSD file named ‘Advert N1’ and then double click on it to open the Smart Object in a new tab.
Next we will need to grab our free stock image from Pixabay which can be downloaded here for our use. Once you’ve downloaded the image let’s find it and open it up in Photoshop.
Click and drag the image inside of the Smart Object file while holding the Shift key, and then press Command/Ctrl+T to do a Free Transform. You will notice that the bounding box extends far outside of our live area so we will need to scale it down quite a bit. To do this, hold the Alt/Option+Shift keys and drag inwards from any of the four corners of the bounding box until the image fits nicely inside of the live area and then press ‘Return’ on the keyboard to apply the changes.
Step 16: Adjustment Layers
Now that we’ve resized our image to fit nicely inside of the canvas, click on the Adjustment Layer icon at the bottom of the Layers Palette and then choose ‘Hue/Saturation…’ from the list as shown below:
From here all we need to do is move the ‘Saturation’ slider to the left until it’s set to ‘-38’.
Step 17: Shadows
Since our advertisement will be inside of a glass box, we want to add a bit of shadow to make it look like it’s pushed back and fitting in a realistic way. To do this let’s select our Gradient Tool (G) and then press ‘D’ on the keyboard to revert to our default colors of black and white. Make sure that black is your foreground color and that you select a Linear Gradient that fades from solid to transparent as shown here:
Create a new layer at the top of your Layers Palette and then click and drag downwards from the top of the image to create a black to transparent gradient fade.
Press Command/Ctrl+J to duplicate the fade layer, and then press Command/Ctrl+T. From here, hold the Control key and click on the image before choosing ‘Flip Vertical’ from the menu that appears.
Hold the Shift key and drag this copy down to the bottom of the image so it fades from black on the very bottom to transparent as it moves up.
Press Command/Ctrl+J to duplicate this layer and then press Command/Ctrl+T again. Hold the Control key and click on the image and this time choose the ‘Rotate 90º Clockwise’ option.
Move this copy to the left edge and then before pressing the ‘Return’ key to commit the changes, hold the Alt/Option key and drag outwards from either the top or the bottom handle of the bounding box so that it extends vertically, covering the left side completely.
Repeat this process once again by pressing Command/Ctrl+J to first duplicate the layer, then Command/Ctrl+T, and then clicking on the layer while holding the Control key. This time we want to select the ‘Flip Horizontal’ option so we can move it to the right side.
You should now have a nice gradient fade on all four sides of the image as shown here:
From here, press Command/Ctrl+S to save the Smart Object and once it’s done saving press Command/Ctrl+W to close the tab and return to your main file where you should now see our image appearing.
Step 18: Changing the Mockup
Let’s turn off the visibility of the ‘Shade N1’ Smart Object layer as we want this part to remain blank. Instead, grab the Pen Tool (P) and begin to trace around only the canvas part of the shade so we can isolate it. For this part simply click to make a point, and then click to make your next point following the shape. If you need to create a curved line simply click and drag before letting go of the mouse. We won’t spend too much time on exactly how to use the Pen Tool for this part as it is a fairly simple shape.
Continue following the contours of the shade by tracing all the way around.
Once you have finished tracing all the way around, close the shape and then press the Command/Ctrl+Return keys to activate a selection around the path. You should now see the marching ants all the way around as shown here:
While your selection is active, go to the Adjustment Layer icon at the bottom of the Layers Palette and choose ‘Hue/Saturation…’ from the list.
For the properties, let’s first check off the ‘Colorize’ box and then change the ‘Hue’ to ‘6’, the ‘Saturation’ to ’24’, and the ‘Lightness’ to ‘-43’ to create a nice, desaturated red color.
Step 19: Contrast
Select the very bottom ‘Photo’ layer and then click on the Adjustment Layer icon once again to reveal a popup menu. From the list that appears we now want to choose ‘Curves’ from the list.
Create a point in the middle of the grid and then move it slightly down and to the right so it’s just about centered in the square below and to the right of center. Once you have done that, reduce the opacity of the Curves Adjustment Layer to about ’50%’ to lessen the effect.
Step 20: Creating the Sign
Let’s now double click on the ‘Facade N1’ Smart Object just above the Curves Adjustment Layer.
The Smart Object will now open in a new window and you will see white text on a transparent background. Here I have added a layer of solid black just below the type to show the text.
Now let’s go back to Illustrator and select the main ‘LA GRANDE PATISSERIE’ text and copy it by pressing Command/Ctrl+C.
Return to Photoshop and press Command/Ctrl+V to paste the vector text and when the ‘Paste’ panel appears make sure to choose ‘Smart Object’ before pressing ‘OK’ to proceed.
Place the text and make it larger by using the Free Transform option. To do this, press Command/Ctrl+T and then drag outwards from any of the four corners of the bounding box while holding the Alt/Option+Shift keys. Once you have done that, press ‘Return’ to apply the changes and turn off the other layers below so all you are left with is your main signage text.
Step 21: Changing the Sign Color
Double click on the signage text layer to open the Layer Style panel and check off the ‘Color Overlay’ option as shown below:
Let’s change the fill color to a light grey color and enter the hex value ‘#F2F2F2’ and then press ‘OK’ twice to apply the changes and close out of the dialog boxes.
After applying the Color Overlay, press Command/Ctrl+S to save the Smart Object and then press Command/Ctrl+W to close out of the tab and return to your main file. You may need to scale the text up a bit and play with the positioning to get it just right as we’ll want this text to be nice and large in the center of the space in the mockup as shown here:
Step 22: Founded in 1925
Double click on the ‘Facade N3’ Smart Object layer.
Return to Illustrator and select the ‘MAISON FONDEE EN 1925’ text on one line. Copy the text by pressing Command/Ctrl+C and then return to Photoshop and paste the layer into the Smart Object file.
Once you’ve pasted the text, make it a bit larger using the Free Transform command and turn off the original text layer below.
Step 23: Gold text
Double click on the Smart Object text layer to bring up the Layer Style dialog box and then check off the ‘Color Overlay’ option.
For the fill color enter the hex value ‘#C2B583’ and then press ‘OK’ twice to apply the changes and close out of both dialog boxes.
Save the file and close the tab to return to your main document where you should now see the gold text in the mockup.
Step 24: Second Logo
Double click on the ‘Facade N2’ layer to open up that Smart Object in a new window.
You will now have the Smart Object file open in a new tab.
Jump over to Illustrator and copy the ‘LA GRANDE PATISSERIE’ lockup with the burst behind it. Copy the lockup by pressing Command/Ctrl+C and then return to Photoshop and paste it as a Smart Object.
Once you have done that, apply the same gold Color Overlay that we used in the previous step.
After modifying the color, save and close the file, and then return to your main document to see the results.
Step 25: Window Displays
Double click on the ‘Window N2’ layer to open up that Smart Object in a new window.
Return to Illustrator and copy the ‘MAISON FONDEE EN 1925’ text with the frames above and below it.
Return to Photoshop and paste the lockup into the Smart Object file before applying the same gold Color Overlay once again. After that, save and close the Smart Object file to return to your main document.
Step 26: Artisanal Pastries Served Daily
Double click on the ‘Window N1’ layer to open up that Smart Object in a new window.
Return to Illustrator and copy the ‘PATISSERIES ARTISANALES SERVIES QUOTIDIENNEMENT’ text before returning to Photoshop and pasting the text as a Smart Object inside of the Smart Object file.
Scale the lockup up a bit to make it larger and then apply the same gold Color Overlay effect that we have used in the previous steps.
Duplicate the Smart Object lockup and this time change the Color Overlay to solid white for the top copy so you have two stacked on top of one another as shown below:
Press ‘M’ to grab your Marquee Tool and then click and drag a rectangle around the first block of text. After that, hold the Shift key and drag a second rectangle around the second group of text.
With both rectangles still active, click on the ‘Add layer mask’ icon to create a mask so that only these two groups of text appear in white, while the rest of the dividers and street number appear in gold.
Save the file and then close out to return to your working document and you should now have something like this:
Step 26: Products and Services
Double click on the ‘Window N3’ layer to open up that Smart Object in a new window.
Return to Illustrator and copy the last text block that lists the types of pastries and services. Copy the text and then return to Photoshop and paste it as a Smart Object.
Repeat the last step where we first applied the gold Color Overlay Layer Style, duplicated the layer, and then change the color of the top copy to solid white.
Use the Marquee Tool (M) to create rectangular shapes around the text and remember to hold the Shift key to add to your selection.
From here we want to once again click on the ‘Add layer mask’ icon to mask out the areas of white, leaving the street number and dividers in gold. Once you have done that, save and close the Smart Object file and you should now see all of your text updated reflected in the storefront mockup!
We have now completed our La Grande Patisserie storefront design! To create our storefront we have used a small handful of unique and high quality typefaces along with some vector ornaments from The Professional, Dynamic Font Library combined with a realistic storefront mockup from the Design Cuts Marketplace. This all new bundle includes 269 individual fonts to give your font library a huge boost!
Remember that whether it’s your outcome for this tutorial or something new you’ve made, we’d love to see your designs on our Facebook page.
Please leave a comment if you have any questions or suggestions. I always look forward to hearing from you!
There’s still time to check out The Professional, Dynamic Font Library providing you with a world class library of fonts that have topped every best-sellers list. From clean sans-serifs, to intricate scripted fonts, creative brush scripts, stunning display fonts, and much more all for an unbeatable price of $29!
Wow! I love all your tutorials! Thanks so much for making learning so much fun guys! Great work, keep it up! :)
Thank you so much for your comment Kavya!
We hope that you have great fun picking up some useful tips and tricks to use in your own projects :)
Hey DC Beauties & Happy Friday!
This tutorial is superb! and well versed with tons of Photoshop & Illustrator tips & tricks built right into the fun . . . as usual! :) You guys & gals just blow me away. Whew! Keep on a rockin” and have the best weekend ever!
Cheers!
Hey Diana,
Thank you so much for taking the time to leave us such a lovely comment, your awesome support means so much to us!
We are thrilled to hear that you love this tutorial and find it a really useful tool to picking up new tips and tricks :) We hope that you have a great weekend too Diana and happy designing!
Thanks for this great tutorial! (just be informed that there is a mistake in one of the French words: we should read “occasions” with one s, not two). À bientôt !
Merci Caroline, and our sincerest apologies for the typo!
We are so glad that you enjoyed the tutorial and hope that you picked up some great tips and tricks!
Thank you Caroline! My French is not quite up to par just yet, but I am thinking of taking lessons! Glad you enjoyed the tutorial :)