Create a web banner in Photoshop CC
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.
In this tutorial, you’ll create a banner in Adobe Photoshop 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, a banner ad, and more.
To start this bannerproject, you’ll open a supplied the template file. Choose File > Open and navigate to the file. Select it and click Open.
Looking in the Layers panel, you’ll see that Photoshop automatically made a new shape
layer containing the circle shape you drew.
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 to fill the circle with.
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, so it looks more like an egg. Layer styles let you enhance objects with creative effects like shadows, strokes, glows, and 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 easy to turn on and off, edit, or even remove.
Now you’ll make the egg yolk. We need another circle, and since we already have a circle with the effect we want, we can simply duplicate this circle and make some changes. In the Layers panel, with the shape layer selected, 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. Since you have the yolk layer and the Move tool selected, you’ll see the Transform box around the yolk. If you don’t see that box, choose Edit > Free Transform. Pressing the Shift key to keep the shape from distorting, drag a corner of the shape to resize it—making it smaller. Click and hold 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 checkmark in the Options bar to stop editing.
Now let’s save the 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.
You can also export another copy in an image format you can post online such as JPEG, PNG, or 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 could also export specific parts of the banner— like just the egg, rather than the whole thing. First, we need to group the egg shape layers together so they are treated like a single object. In the Layers panel, Click the top shape layer, then Shift-click the last shape layer here. Choose Layer > Group Layers. Right-click the group layer, over here, and choose Export As. In the Export As dialog box, select a format like PNG or SVG—both suitable for use on a website— and click Export All. That will export just the egg shape, without the rest of the banner.
You’ll find more information about exporting artwork from Photoshop in the other Adobe Learn tutorials at adobe.com.
Using the provided template and the skills you just learned you can now create your own banner for your blog, an email 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!
* Nguồn: Photoshop CC
Ý KIẾN THÀNH VIÊN