For many web and digital designs, the designer’s intent is to make the viewer feel like they’re visiting in person. Not every interested customer can physically visit your storefront, conference, event, or sale, so it’s important to invite them and accommodate them online. One way to achieve this is to allude to items they might see if they were truly on location; many online designs involve tickets, price tags, and paper-like promotions.
One additional way to make a website visitor feel more like a real participant and attendant is with digital representations of physical signage. Why offer them a simple JPEG when you can make them feel more like a physical visitor? Today I’ll show you how to make a roll-up banner mockup in Photoshop. We’ll use various shape tools, pen tool, different layer styling techniques, and a few filters to achieve the final outcome. Hopefully you will get few handy design tips along the way. So, let’s get started!
Final result: (Download the finished, layered PSD file.)
Create a new document in Photoshop with a 900px width and a 700px height.
Pick #e5dccc as your foreground color and paint the canvas using the paint bucket tool (“G”).
Now go to “File” > “Place” and choose the “wall texture.” Change its blending mode to “Overlay” and reduce its opacity to 40%.
Next, we’ll make the wooden floor. Go to “File” > “Place” and choose the “wooden texture” file.
Now press Ctrl + “T” to activate the free transform tool and decrease the texture’s size vertically.
To give the floor proper perspective, go to “Edit” > “Transform” > “Perspective” and drag one of the bottom corners of wood texture outwards as shown below.
We’ll adjust the wood color now, press Crtl + <click on the wood texture layer> to make selection around it. Now, click on the icon to “Create new fill or adjustment layer” present at the bottom of layers panel and choose “Color Balance.” Apply the provided “Midtones” settings here.
To make a border at the junction of the wall and the floor, draw a rectangle using the rectangle tool with #e8e8e8 as your selected color.
Next, we’ll make the roll-up stand. Collect all of the background layers into a group and hide it. Now, select the rounded rectangle tool and click on the canvas to open the rounded rectangle window. Enter the following values here and hit “OK”.
Apply the perspective tool by going to “Edit” > “Transform” > “Perspective” and drag one of the bottom corners of rectangle outward to shape it as shown below.
Double-click the stand layer to open the “Layer style” window and apply the given settings for “Gradient Overlay” and “Bevel and Emboss” to give it some character.
Select the pen tool (Tool mode: Shape) to draw the shape shown below at the left side of stand. You can use any color for now.
Double-click on this new shape layer and apply the following settings for “Gradient Overlay.”
Duplicate this shape layer by going to “Layer” > “Duplicate Layer” and flip it by going to “Edit” > “Transform” > “Flip Horizontal.” Position it at the stand’s right side.
Next, we’ll make stand’s feet. Draw a rounded rectangle with the settings shown below.
Draw another rounded rectangle with following values and position it as shown below over the previous rectangle. Now, select both the rectangles and press Ctrl + “E” to merge them.
Double-click on the foot layer and apply the following settings for “Gradient Overlay” and “Drop Shadow.”
Duplicate the foot layer and position it towards the right side of the stand.
To make stand’s shadow, draw a thin rounded rectangle in black color. Now, go to “Filter” > “Blur” > “Gaussian Blur” and apply a 3px Gaussian blur filter to it. After that, go to “Filter” > “Blur” > “Motion Blur” and enter 30px for Distance and 0⁰ for your angle to get the effect shown below. Finally, position the shadow below the stand. Look below for clarity.
Next, make a rectangle to define the location to paste your banner.
Press Ctrl + <click on the banner rectangle> to make selection around it. Now, create a new layer above the banner and apply a soft round brush in black color at the top and bottom borders to form a shadow. Change the blending mode of shadow layer to “Multiply” and reduce its opacity to 30%.
To make the top portion of the stand, make a rectangle using the rounded rectangle tool.
Double-click on the rectangle and apply the following settings for “Gradient Overlay” and “Drop Shadow.”
Next, to make caps on the top portion, draw a small rounded rectangle and apply a “black-white-black” gradient on it at 90⁰ using the “Gradient Overlay” option.
Our roll-up banner stand is ready. It’s just the matter of pasting your banner design within the stand now. Collect all of the banner layers into a single group and label it as “Stand1”. Duplicate the stand1 group, label the new duplicate as “Stand2”, and slightly decrease its size using the free transform tool (Ctrl + “T”). Place stand2 group below the stand1. Create a new layer (“Layer” > “New Layer”) above it and roughly make shadow using a soft round brush as shown below. You can erase any unwanted parts of the shadow using the eraser tool. Change the blending mode of shadow layer to “Multiply” and reduce its opacity to 50%.
Duplicate the stand2 layer, label it as “Stand3”, and reduce its size and place it below the stand2 layer. Make a shadow over it using the same technique use for stand1 and 2.
Make the background group visible now. I’ve displayed a sample image to show you the finished look. Lastly, apply a soft round brush in white and black color on a new layer just above the background group as shown below.
Now, apply a 15px Gaussian blur filter (“Filter” > “Blur” > “Gaussian Blur”) on the shading layer and reduce its opacity to 20-30%.
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja