.
Mac inspired content box
In this Adobe Photoshop tutorial I will show you how to make this stylish content box as I used as part of a web user interface in a project I'm working on and now I want to share it with you.
First start by dragging a rounded rectangle shape to the stage, in the layers panel right click and choose rasterize layer, then double click the layer to get in to the styles panel and give it the following settings.
Now hold down ctrl and click the new shape layer to load the selection, then with the selection tool choose intersect with selection mode and drag out as I did below, so you only have the top part selected.
Make a new layer, still holding the selection we just did.
Fill it with a random color of your choice, we will change it in a moment.
Now double click the new layer containing the top part shape, and in the layers styles panel give it settings as shown below.
With the line tool, drag and draw a straight line just beneath the top shape all the way across our content box, give it a dark gray color, so it looks like a shadow, in indent.
You can now add in a shape to the content box as I did from the custom shapes panel and in the blending modes blend it with either lighten or multiply to blend it with the content box color.
Now to making those small buttons at the top of our content box.
In the layers panel create a new folder an name it button, to hold the button layers separate from all the other layers, so there is no confusion.
With the elliptical shape tool drag a small round shape in the top part as I did below, then in the layers panel right click and choose rasterize layer.
This shape will be like an indent to the button, you will see how this works later.
In the layers panel double click and in the layers styles panel give it styles as shown below.
Hold down ctrl and click the layer holding the elliptical shape, to load the selection, then make a new layer above it and name it button.
Go to the top menu select -> modify -> contract and contract your selection by 2 px. Then fill the selection with a random color, we will change it later.
In the layers panel double click and in the layers styles panel give it styles as shown below.
Now you will need to zoom in a bit, because the button is a bit small I we need to see better. (sorry the image gets a bit blurry when I zoom in, thats because we are working with pixels).
Hold down ctrl and click the buttons layer to load the selection, then choose selection mode, "intersect with selection" and drag at the top as shown here.
Now make a gradient going from white to transparent and drag it inside the new selection.
Repeat this step to make some glossiness at the bottom part of our button.
Now you can copy the button a couple of times (the whole folder in the layers panel) and make a many buttons as you like, go to the styles panel of the button layer and change the colors for some of them if you want.
