Cloud page layout picture frame ps tutorial

We are going to be making a cloud page layout frame today! I used to make many sites like this and still enjoy using the concept for certain clients.

Cloud layout photoshop tutorial

Step 1 – Make your image size any size you want. I used a 500px wide image to make the screenshots fit nicely into this blog. :) Make a gradient using #a1caec (left) and #ffffff (right) – Use your gradient to fill vertically (up and down) the entire page.

If you did Step 1 correctly you should have something that looks like the image above.

Step 2 – Choose your Rounded Rectangle Tool – you will now set the rounded edge to 10px (depending on how big you want the curve). Using your tool and the color #ffffff – Set the thickness of the line to 10-20px. Make a large square with rounded corners using that tool.

Choose the other Rectangle Tool (without rounded) and make a smaller square inside the rounded square you already made.

You should now have something that looks like this.

Choose the Ellipse Tool

Step 3 – Open a new layer. Click on the canvas, hold down Shift and pull away making a perfect circle. Make 2 more circles in different sizes (both on different layers) and layer them over each other.

You should now have an image like this one.

Step 4 – Repeat Step 3 making another area of circles. Now it’s starting to look like small clouds on the frame. Now Repeat Step 3 again in another area on the frame. Remember to put the circles in different layers so you can move them around if you don’t like the way they came out.

Things are looking the same. To change things up, I added one more circle to the cloud on the right of the frame.

This is how it should look when your finished. Other ways to use this would be floating cloud shapes in Flash floating behind this box and then going off the page in the blue part of the screen.

You are finished. Did you enjoy this tutorial? Please tell me about it in the comments below. :) Tell me how long it took you to make it!
Oh, if any part of this tutorial was difficult to follow or you got lost in a part of it, please comment about it. Don’t feel like others will think you’re an idiot. If I see enough people getting stuck, I can change the tutorial or add another step to make it easier to understand for you.