How to Design a Cute Kids Web Layout in Photoshop

This is a super-quick tutorial for designing a website related to kids. Kiddy shops or any business related to children would love to have this kind of design made for their website.

You don’t have to copy this design; its purpose is to provide you with an inspiration about designing websites for kids. The color scheming and vector type designing creates a lot of appeal.

I only added elements which are usable for any website but you should alter/add the ones that suit your design. For example if you design a site for a Candy Shop, add a few candies and sweets.

Final Result

Summer Website Tutorial

Step 1 – Blank File

First step is the obvious one, open a blank PSD file. This is the standard website size I am using with resolution of 72.

Free Photoshop Tutorial

Step 2 – Background

Now select the Gradient Overlay Layer Style to the background layer.

Free Tutorial of Photoshop


Now we get the beautiful sky Background.

Tutorial of Photoshopp

Step 3 – Rise of the Sun

Select the Custom Shapes Tool and  shape and Draw the Sun.

Design Free Tutorial of Kids Template

Step 4 – Make-up

Apply the Bevel and Emboss Layer Style on Sun shape.

Design Kids Template

Step 5 – Kids Like Clouds

Select the shape of Cloud and draw a few of them.

Free Kids Layout Tutorial

Step 6 – Make-up

Apply the this Gradient on Clouds.

Easy Tutorial of Photoshop

And we also apply the Stroke on clouds.

Design Easy Template


After drawing Clouds and the Sun, we get a very beautiful result and this will be our attractive Navigation Bar.

Free Web Layout Tutorial

Step 7 – Rainbow

Select the Elliptical Marquee Toll to draw the Rainbow.

Stylish Web Template Tutorial

Step 8 – Colors of Joy

We draw the rainbow and fill with colors. You can of course change the colors.

Free T utorial of Kids Template



We get a very colorful Rainbow.

Free Tutorial of Photoshop Web Layout

Step 9 – Placing the Object

As you can see I have faded the edges of our rainbow, don’t forget to do that. Now we get a very colorful Header.

Free Design of Web Layout

Step 10 – Footer

Lets jump to the footer, that is because these kind of websites don’t contain a lot of text so there’s no point in making a solid content area. We should rather make the footer interesting. Coming towards the Footer, we choose the Pen tool and Draw the surface and fill with color.

Photoshop Tutorial

Step 11 – Mud Hill

Choose the Pen Tool and Draw the shape. After this apply the Drop Shadow on both surface shapes.

Free Tutorial of Chicken Template

Step 12 – Greenery is Good

Select the Shape of Grass using our good old friend Custom Shape Tool.

Web Layout of Kids Website

Step 13 – The Colors of Grass

After this, fill the surface with colorful Grass. The trick here is that I used three different colors of grass. Follow this trick, you will make your objects seem realistic.

Free Web Layout Photoshop

Step 14 – Elements Additions

In footer of this colorful template, we added house and we drew a door in it.

Template Tutorial

Step 15 – Elements add Spark

After adding the house and grass, add a Board.

Free Tutorial of Photoshop

Step 16 – Final Proof

Added colorful Umbrella and added tiny Chicks from here and here. Template Seems very beautiful and colorful. All these elements provides an elegant look. See the result below.


Summer Website Tutorial

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved