Create a web banner
Learn how to make a banner in Photoshop with shape layers and layer styles. Use these skills to make online headers for blogs, ads, or email, or anytime you're designing in Photoshop.
Published
Introduction
[Fried Egg Catering] >> In this tutorial, you will create a web banner in Adobe Photoshop, [Fried Egg Catering] to learn some Photoshop essentials like working with shapes, layer styles, and exporting your work.
You can use the provided template and the skills you learn to create a banner for your blog or YouTube channel, an email header or a banner ad, and a whole lot more.
Opening the template and preparing the project
To start this project, you'll open a supplied template file.
Choose File, Open, and navigate to the file.
Select it, and click Open.
[Creative Cloud] This dialog talks about a great feature for importing assets [Creative Cloud] into the Creative Cloud libraries panel in Photoshop.
You can learn more about Creative Cloud libraries by clicking on the link here.
Importing assets isn't necessary for this tutorial, so you can click Cancel.
Now we will add an egg we make out of a series of shapes,
Creating the egg white with shape tools
starting with a circle.
To create shapes, we use the shape tools found in the tools panel here.
Click and hold down on the rectangle tool and select the Ellipse Tool.
Shape tools let you create all sorts of vector shapes that are perfect for creating art work like our egg, because vector shapes are scalable and easily editable.
In the design, press and hold the shift key as you drag to create a circle.
The shift key makes the shape a perfect circle on this case.
When it's the size you want, release the mouse button and then the key.
In the layers panel, you'll see a new shape layer containing the circle shape you drew.
Now you'll name the layer so you can more easily keep track of the layers later.
Double click the layer name, change it to "Egg White" and press Enter or Return.
Next you'll change the color of the shape so it looks more like an egg.
Looking in the properties panel that opened after you created the shape, click this color box and select a color fill to fill the circle with.
Then click the Properties panel tab to close it.
Select the move tool, and drag the circle into the center of the design area.
A magenta smart guide may show when it's aligned to center.
Next, you'll add a creative design effect to the circle using a layer style,
Enhancing shapes using layer styles
so it looks more like an egg.
Layer styles let you enhance objects with creative effects like shadows, strokes, glows, and much more.
To apply a layer style, first make sure the layer is selected.
Then choose Layer, Layer Style, Inner Shadow.
In the dialog box that appears, you can change all kinds of settings to get the effect you want, even try other popular effects, like an outer glow or drop shadow.
Once you like what you see, click OK.
The inner shadow effect now appears on the image, here.
It also appears under our shape layer in the layers panel, making it easier to turn on and off, edit, or even remove.
Now we'll make the egg yolk.
Duplicating and resizing shapes for the egg yolk
We need another circle, and since we already have this circle with the effect we want, we can simply duplicate it and make some changes.
Make sure the shape layer is selected in the layers panel.
Choose Layer, Duplicate Layer.
Name the layer "Yolk" and click OK.
Open the Properties panel by clicking here.
Click this color box and select a yellow color to fill the circle with.
Then click the Properties panel tab to close it.
Our egg yolk needs to be smaller, so we need to resize it.
In Photoshop, you can use Transform to resize the contents of a selected layer without affecting the rest of the image.
With the yolk layer selected and the move tool still selected, choose Edit, Free Transform.
Pressing the shift key to keep the shape a perfect circle, drag a corner to resize it, making it smaller.
Release the mouse button and then the shift key.
Click and hold down inside the transform box, being careful not to click on this icon in the middle of the box, and drag the circle to position it here.
Click the check mark in the options bar to stop editing.
Now let's save the banner.
Saving and exporting the web banner
Choose File, Save As.
Make sure to save it in the Photoshop format, with Layers checked, so you'll have a layered file you can reopen for later editing.
Then click Save.
Saving with Maximize Compatibility checked helps ensure that the file would be compatible with older versions of Adobe Photoshop and other programs.
If you aren't exactly sure how you might use your file, it's a good idea to leave the Maximize Compatibility box checked.
Click OK.
You can also export another copy in an image format you can post on a website, like JPEG, PNG, or even SVG.
Choose File, Export, Export As.
In the Export As dialog box, you can choose the file type, JPEG, in this case.
Click Export All, and choose where to export the file.
Then click Export.
You'll find more information about exporting artwork from Photoshop in other Photoshop tutorials at Adobe.com.
Using the provided template and the skills you just learned, you can now create your own banner for your blog and e-mail header, channel art for YouTube, a banner ad, and so much more.
As you learn and explore in Photoshop, remember to have some fun with it.
Learn more about Creative Cloud for teams.
