Design a Roll-up Banner Stand in Photoshop

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!

Resources:

Wall Texture
Wood Texture
Sara by Kuba Kobylecki

Final result: (Download the finished, layered PSD file.)

Banner Stand Mockup

Step 1

Create a new document in Photoshop with a 900px width and a 700px height.

Banner Stand Mockup

Step 2

Pick #e5dccc as your foreground color and paint the canvas using the paint bucket tool (“G”).

Banner Stand Mockup

Step 3

Now go to “File” > “Place” and choose the “wall texture.” Change its blending mode to “Overlay” and reduce its opacity to 40%.

Banner Stand Mockup

Step 4

Next, we’ll make the wooden floor. Go to “File” > “Place” and choose the “wooden texture” file.

Banner Stand Mockup

Now press Ctrl + “T” to activate the free transform tool and decrease the texture’s size vertically.

Banner Stand Mockup

Step 5

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.

Banner Stand Mockup

Step 6

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.

Banner Stand Mockup

Step 7

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.

7 7b Banner Stand Mockup

Step 8

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”.

Banner Stand Mockup

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.

Banner Stand Mockup

Step 9

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.

9 9b Banner Stand Mockup

Step 10

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.

Banner Stand Mockup

Step 11

Double-click on this new shape layer and apply the following settings for “Gradient Overlay.”

11 Banner Stand Mockup

Step 12

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.

Banner Stand Mockup

Step 13

Next, we’ll make stand’s feet. Draw a rounded rectangle with the settings shown below.

Banner Stand Mockup

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.

Banner Stand Mockup

Step 14

Double-click on the foot layer and apply the following settings for “Gradient Overlay” and “Drop Shadow.”

14 14b Banner Stand Mockup

Step 15

Duplicate the foot layer and position it towards the right side of the stand.

Banner Stand Mockup

Step 16

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.

Banner Stand Mockup

Step 17

Next, make a rectangle to define the location to paste your banner.

Banner Stand Mockup

Step 18

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%.

18 Banner Stand Mockup

Step 19

To make the top portion of the stand, make a rectangle using the rounded rectangle tool.

Banner Stand Mockup

Double-click on the rectangle and apply the following settings for “Gradient Overlay” and “Drop Shadow.”

19b 19c Banner Stand Mockup

Step 20

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.

Banner Stand Mockup
Duplicate the rectangle and position the new copy at the other end.

Banner Stand Mockup

Step 21

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%.

Banner Stand Mockup

Step 22

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.

Banner Stand Mockup

Step 23

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.

Banner Stand Mockup

Now, apply a 15px Gaussian blur filter (“Filter” > “Blur” > “Gaussian Blur”) on the shading layer and reduce its opacity to 20-30%.

Final result:

Banner Stand Mockup
That’s it! I Hope you enjoyed the tutorial and learned something useful. Enjoy thrilling your visitors who couldn’t make it to you in person.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://clippingpath.in/ Alexie

    I prefer for designing adobe Photoshop. That tutorial is really pretty cool! Design is too much adorable and creative.

  • http://Totallyrealsitenotfak7e2.com/ Virgil

    Really nice tutorial!

  • geeo

    Very nice tutorial

    Also the whole concept – very creative thinking