Want to create a catchy banner for your website? Fortunately, simplicity and minimalism are currently rocking. So, you don’t have to go overboard with complex visual effects to create an appealing banner.
I hope you’ve heard about the phenomenon, called banner blindness. Users tend to avoid additional blocks on the website that look out of place and clashes with the overall design of a webpage. The takeaway lesson here is that your banner should be simple and match the overall design of a page as much as possible.
In this post, I’ll show you how to create such a simple banner using Adobe Photoshop. As a result, you’ll get the banner that is ideal for a dance studio website. As an inspiration for this banner I used this beautiful Emanuella – Dance School Responsive WordPress Theme.
End Result
Download free resources
Male Dancer
Female Dancer
Open Sans Font
Step 1 – Setting up Document and gradient background
Open your Photoshop and select File > New (or just press Ctrl +N). Now you need to select the dimensions of the banner in the New File window. Specify width, height and resolution of the banner, I made this banner 980px x 240px. The default resolution is 72ppi (pixels per inch), which is great for web. Once you’re done with set up, press the OK.
Next add a Gradient Fill and set the gradient color to: light blue #c7e1e6, cream #eaeceb and light pink #f1c9dd. Under Gradient Fill set the Angle to around 47, Scale 209 and select Dither.
Step 2 – Add dancers
Download the free images linked above. Start by adding the male dancer. Luckily the image is a PNG with a transparent background so we can just directly add the image to our document. For this, go to File > Place, select the image and press the Place button. Move the image to the location you want. Resize if needed by hovering over the corner of the image that you want to resize and you’ll see a double-sided arrow there. Press and hold the Shift and move the cursor up or down diagonally. at the top, you’ll see the current size of the image in percent. Don’t let the image go above 100% as it might lose quality and get pixelated.
Next add the female dancer by opening the photo in Photoshop. She is on a light background and we’ll need to remove it before adding the image to the banner. To cut her out you can use the method that you are most comfortable with (pen tool, quick selection tool etc.). Once you are satisfied with the cutout you can drag and drop her to the banner document.
Now select the 2 dancers and group them and name the group Dancers. Inside the dancers group I’m going to add a Photo Filter adjustment layer. Select Sepia Filter and set the mode for the adjustment layer to Screen and drop the opacity to 50%.
Step 3 – Add text
Let’s go for adding some text to your banner. You can use a font of your chose or use the same free Open Sans font that I used in this banner. Go for the font that ensures good readability and select a contrasting color that matches the main text or accent color of your website. Click the place on the banner, where you want to add the text. For the text we used #1c1c1c and 40pt size font for the ‘World of Dance’ and 21pt for the ‘Book Your Dance Lessons now!’. Select the 2 text layers and group them and name the group ‘Text’.
Step 4 – Create a button
Then we are going to create a button. For this too match the accent color of your website. Since we are going for the look and feel of the Emanuella dance studio theme we are going to make the button hot pink #fe2c6c. Select the round rectange tool, set the radius to 30px and draw the button. The exact size of my button is 167px x 39px. Next add white, 16pt text on the button saying ‘View Classes’ or what ever you prefer it to say. Select the white text and round rectangle and group them and name the group ‘Button’.
Step 5 – Final touches
The design is pretty much done, you can add adjustment layers to adjust the colors and contrast. I added a Hue/Saturation Adjustment layer and set the Saturation to -8 and that’s it. When saving the banner, you’ll want to save it for web to make sure that it’s loading as fast as possible. To save for web select File -> Save for Web
Now you can add the newly created banner to your website. The banner that we just created is great for websites with dance studio theme.
Here are some themes for your inspiration:
Conclusions
Now you know how to create a catchy and simple banner in Photoshop. With such a banner, you’ll get the attention of your site visitors and you will be able to defy banner blindness.
I wish you good luck in creating your own simple and catchy banner!
Stay Tuned!
