Create a Kids Oriented Web Layout Using Photoshop

Apr 13 2010 by Callum Chapman | 34 Comments

Create a Kids Oriented Web Layout Using Photoshop

In this tutorial we will be creating a simple, easy to use and colorful web design layout in Photoshop that is primarily aimed at children. The simple navigation, bright colors and limited content is something that would really appeal to the youngsters.

We will be making use of loads of tools in this tutorial, such as the rounded rectangle tool, the Warp Transform tool, the Brush Tool, the built in Stroke Tool and plenty of gradients. We’d love to see your results, so be sure to share them with us!

Final Result

Click on the image preview to see the full size version.

Final

Sketching

1 Before starting work on a web design, I also sketch at least one idea. For this tutorial, I had a pretty good image of the theme I wanted to create, so I only roughed out one sketch. Heading into Photoshop with a prepared sketch and a rough image of the design you want to create makes things much easier down the line, mainly because you have something to refer to when things get tricky.

Setting up the Photoshop document

2 Head over to Photoshop and create a new document. Make sure your document uses the RGB color mode at 8 bit, and that the resolution is 72 pixels/inch. Enter 1280 into both the Width and Height fields. Although the width of the canvas doesn’t really need to be this large, it’s a good size to work with because it allows us to see what the design would look like on a bigger monitor. Click OK to create your document.

Setting up the Photoshop document

3 It’s time to set up some guides, which are always very important when designing for the web. Go to View > New Guide and with Vertical selected, type in 160px and hit OK. Repeat the step again, but this time insert 1120px into the field.

Setting up the Photoshop document

That’s all there is to setting up the canvas for the web. We’ll be adding more guides throughout the tutorial, but for the time being, there’s no need!

Creating the initial stucture

4 With our document and guides set up, it’s time to work on the main structure of our design. Using the Paint Bucket Tool (G), fill the background with a color other than white. You won’t be sticking with this color but it just makes things a little easier whilst we’re designing the rest of our theme! I’m using a dark brown.

Creating the initial stucture

5 Select the Rounded Rectangle Tool (U). Use a Radius of 10px and drag out a new shape. Make sure you drag to and from the edges of your guides that we set up in the previous step! Change the color of your new shape to white if you haven’t already. Change the name of your new shape layer to ‘Main Body‘.

Creating the initial stucture

6 Rasterize your shape layer by going to Layer > Rasterize > Shape. This turns your shape into pixels from a vector image and makes it much easier to work with in the following step.

Creating the initial stucture

7 Zoom right in to one of the corners at the bottom of your main body shape. With the Rectangluar Marquee Tool, make a selection over the corner of the shape.

Creating the initial stucture

8 Fill the selection with white using the Brush Tool (B). Repeat the process with your other corner.

Creating the initial stucture

9 Unselect the selection and with the Single Row Marquee Tool, make a selection directly beneath your main bodies shape. Choose a light gray color (I used #e8e8e8) and fill your selection, making sure you are still on the main body shape layer.

Creating the initial stucture

Creating the initial stucture

10 You now may notice that you have a 1px line going completely through our canvas. To fix this, we just need to delete the excess of the line by using the Rectangular Marquee Tool (M). Make a selection over the area you want to delete and then press the Delete or Backspace key. Repeat the step again to remove the excess line on the other side of our document.

Creating the initial stucture

Creating the initial stucture

Creating the initial stucture

11 Duplicate the main body layer by going to Layer > Duplicate Layer or by dragging the layer down to the New Layer symbol at the bottom of the Layers Panel. You can rename the new layer to Main Body Background. With the new layer selected, go to Edit > Free Transform, and drag the bottom point down.

Creating the initial stucture

Creating the initial stucture

12 Move the layer (Main Body Background) beneath our Main Body background and change the color: I’m going to use #262d35.

Creating the initial stucture

That’s pretty much the main structure of our body. We’ll obviously be adding more elements throughout the remainder of the tutorial!

Adding some of the appealing elements!

13 With the main body layer selected, select the Rectangular Marquee Tool (M) and make a selection of the bottom right corner whilst holding Shift to keep it in proportion. When you have a suitable sized selection, go to Edit > Transform > Warp. Drag the right bottom corner towards the center of your selection to make it look like a curved corner.

Adding some of the appealing elements!

Adding some of the appealing elements!

14 Select the Pen Tool (P) and zoom right into your corner. Make a selection to represent the other side of the ‘paper’ – it might take a few attempts to get right! Once you have a suitable selection, fill the path with a medium gray color on a new layer.

Adding some of the appealing elements!

15 You may have noticed that it’s very difficult to get the shape the exact same size that what we need it. I managed to get it pretty close, but in some places you can still see unwanted white pixels. To fix this, zoom right into your canvas and replace them with our gray color using the Pencil Tool (B).

Adding some of the appealing elements!

Adding some of the appealing elements!

16 Call this new layer ‘Page Curl‘. With the page curl layer selected, go to Layer > Layer Style > Blending Options. Add a Gradient Overlay using the settings that can be found in the screenshot below.

Adding some of the appealing elements!

17 Make a new layer beneath our page curl and call it ‘Page Curl Shadow‘. Select the Brush Tool (B) and select a soft, medium-sized brush. Make sure you have black selected and paint an area of black on your canvas. Go to Filter > Blur > Gaussian Blur and blur the selection by about 3px. Set the layers Opacity to about 3%.

Adding some of the appealing elements!

Adding some of the appealing elements!

18 Our page curl is now a little bit too hard to see. To fix this, we’re going to add a 1px stroke. Re-open the Layer Styles on our page curl layer and click on Stroke. Use the options in the screenshot below.

Adding some of the appealing elements!

Adding some of the appealing elements!

Adding some of the appealing elements!

Concentrating on Navigation!

19 Select the Polygonal Lasso Tool (L) and zoom into our design at 100%. Make a new layer below all other layers but the background, and call it ‘Navigation Background‘. Make a random selection and fill it with blue.

Concentrating on Navigation!

Repeat the step again several times, each time filling the shape with a different color.

Concentrating on Navigation!

Concentrating on Navigation!

Concentrating on Navigation!

Concentrating on Navigation!

20 Open up the Layer Styles window for our navigation background layer. Add the following Drop Shadow, Inner Shadow and Gradient Overlay.

Concentrating on Navigation!

Concentrating on Navigation!

Concentrating on Navigation!

21 Hold Cmd (or Ctrl) and click on the thumbnail image of the navigation background layer in the Layers Panel. This should make a selection of all your buttons. Make a new layer above your navigation background layer and go to Edit > Stroke and add a white 2px stroke. Do the same again, but this time make it a black 1px stroke. Set the stroke layers Blending Mode to Overlay and the Opacity to 50%.

Concentrating on Navigation!

Concentrating on Navigation!

Concentrating on Navigation!

Concentrating on Navigation!

22 Select the Type Tool, and with the typeface ‘Helvetica Neue‘ selected, create some dummy text on your navigation buttons. Make sure you keep your text straight, this way when it comes to coding the design we can use actual text instead of images, much more browser and search engine friendly! When your dummy text is finished, open the Layer Styles for your type layer and use the following Drop Shadow settings.

Concentrating on Navigation!

Concentrating on Navigation!

Concentrating on the Main Content!

23 It’s time now to start concentrating on the main content area of the theme. Locate your first layer (Main Body) and duplicate it once again. Go to Edit > Free Transform and in the top settings bar change the width and height to 95%. This should shrink the layer, making it fit nicely in our main content body. Apply the changes.

Concentrating on the Main Content!

24 You may notice the 1px line and curved corner on the duplicate layer – we don’t want this, so we need to delete it. Select the Rectangular Marquee Tool (M) and chop the bottom of the layer of by making a selection and pressing the Delete or Backspace key.

Concentrating on the Main Content!

Concentrating on the Main Content!

25 Open the Layer Styles for our new duplicated layer and select Gradient Overlay. Select the White to Transparent gradient, and change the white color to #262d36 which is the same color we used in our footer. Drop the Opacity of the Gradient Overlay to 10%. You can see the settings in the screenshot below.

Concentrating on the Main Content!

Concentrating on the Main Content!

26 Go to View > New Guide. With vertical selected, enter 640px; this will find the center of the canvas. Select the Horizontal Type Tool (T) and enter a couple of lines of text, such as ‘Most Played Games‘ and ‘Most Viewed Programs‘. Leave the text white.

Concentrating on the Main Content!

27 Open the Layer Styles for your new type layer and apply a Drop Shadow using the following settings.

Concentrating on the Main Content!

28 Select the Rectangular Marquee Tool (M). Then, in the Options bar, change the style to Fixed, and set the width and height to 125px.

Concentrating on the Main Content!

29 Make a new layer above all others and call it ‘Placeholder Thumbs‘. On this layer we’re basically going to make several place holders for the most played games and most viewed programs. The idea of this is so when the design is coded, the placeholders can be replaced with thumbnails of the games and TV programs.

Click on the screen to produce a selection of 125px x 125px. Use the mouse or cursor keys to move the selection in to the correct place. Fill the selection, and then using the Shift + Cursor keys, move the selection to the right, fill the selection, and then repeat again. When you’ve done one row, duplicate the layer and move it down with the Move Tool (V). When it is in position you can press Cmd + E (or Ctrl + E on Windows) to merge the two layers together.

Concentrating on the Main Content!

30 Create some more dummy text beneath your placeholders. Try to jazz things up a little bit here to add some interest; I hit the Tab key a couple of times on the first two lines and entered a fancy letter.

Concentrating on the Main Content!

Concentrating on the Main Content!

31 Repeat the step again, this time adding two paragraphs of dummy text in the footer of your design.

Concentrating on the Main Content!

Concentrating on the Main Content!

Concentrating on the background!

32 As I mentioned earlier, our background isn’t staying dark brown, it was simply a temporary fix! Change the color of our background layer to #ebebeb. Make a new layer above the background and call it ‘Background Gradient‘. Select the Rectangular Marquee Tool (M) and select the top half of our design. Fill the selection with black – make sure your new layer is selected!

Concentrating on the background!

Concentrating on the background!

33 Open the layer’s Layer Style window and click on Gradient Overlay. Have the bottom of the gradient merge into the same color as the rest of our background, and a color of your choice at the top of the gradient. I used #c6f4ff.

Concentrating on the background!

Concentrating on the background!

34 Make another new layer and call it ‘Background Noise‘, fill the layer with white. Go to Filter > Noise > Add Noise. With Gaussian and Monochromatic selected, enter the 10% in the amount and click OK. Change the layer’s Blending Mode to Multiply and the Opacity to 35%.

Concentrating on the background!

Concentrating on the background!

35 Put all your main body layers and dummy layers into folders. Locate the main body and footer layers, using the Cmd + click (or Ctrl + Click) trick, make a selection of the layer’s content. You can do this by Cmd + clicking on the first layer, and then Cmd + Shift + clicking on the second. With the selection made, hide the main body content folder by unclicking the eye next to the folders thumbnail in the Layers Panel.

With your selection still active, make a new layer and call it ‘Background Shadow‘. Fill your selection with black and then go to Filter > Blur Gaussian Blur. Enter 25 into the field and click OK. Reduce your new layer’s opacity to about 30%, and then make all your other folders visible again.

Concentrating on the background!

Concentrating on the background!

36 To finish things off, I added 2% of Noise to the footer by going to Filter > Noise > Add Noise.

Concentrating on the background!

All done!

Final

Related Content

About the Author

Callum Chapman is a mobile and web user interface designer. He has worked with many internationally known brands as well his own projects such as Dotgrid.co. You can follow Callum on Twitter at @callumchapman.

34 Comments

Liam Maskell

April 13th, 2010

Some great techniques here Callum :)

stope

April 13th, 2010

This design sux =D There ain’t nothing new or special in it… Booo…

brice

April 13th, 2010

yep it sucks indeed, shame to find this in your website…

Anton Reimertz

April 13th, 2010

Even though the program grid might work on children everything below seems way too focused on plain text.

HD Guy

April 13th, 2010

The end result looks great! Congrats!

twong

April 13th, 2010

awful design doesn’t even look a third finished…don’t know why you even bothered mate.

Blogging Tips

April 13th, 2010

Excellent tutorial to create an appealing webpage.

Jordan Walker

April 13th, 2010

That is really fun, thanks for tutorial.

Abdelhadi Touil

April 13th, 2010

Very nice tutorial!! I was looking for such as tutorials, so thank you very much :)

Josh

April 13th, 2010

Sadly, this looks like a template that has colorful buttons, a page curl and noise (?!) added to it. Not really sure what’s “kid-oriented” about that. Creating a kid-oriented site is not so much about the design. The little bit of design that’s important is a lot of bright color – desaturated colors are a no-no. Creating a kid-oriented site is more about creating a site that’s easy to navigate, usable, interactive, and makes kids want to come back. I’ll give you this: the design is a start… but it’s got a long way to go.

Jacob Gube

April 13th, 2010

We appreciate all of your feedback, good or bad. We’re taking what you have said under advisement.

jonny

April 13th, 2010

While the tutorial itself is well written, the design is awful; It looks like a school project. I expected better from you, Six Revisions :<

Jacob Gube

April 13th, 2010

@jonny: Thanks for sharing your thoughts. I want you to know that we’re listening and hopefully, we’ll publish tutorials that will keep you guys satisfied.

To others: Clearly, there’s some discontent here. Another thing that would help is if you shared tutorials that you’ve read here that you DID like, so that we can focus on more types of those.

Additionally, if you have suggestions on what types of tutorials you’d like to see that we haven’t done before, I’d love to hear them as well.

Thanks everyone.

Louis

April 13th, 2010

I don’t know why people are dissing the design on the final product. It’s simple, has some splashes of color, and plenty of areas to grab a kid’s attention (when filled with content). No reason for the design of a kid’s website to be super-cutting-edge. I think the principles behind the design are what matter more.

I think it’s fine, and it works for the purpose that’s set out in the title — that it’s “kids oriented”.

Thanks, Callum.

Richard

April 13th, 2010

Good work but I’m not a great fan of the noisy bg :s

Diego

April 13th, 2010

Very simple tutorial to design a layout.
It`s very important to begenners.
Always learn anyting :)
Thanks.
Diego (Brazil)

zoe4ever

April 13th, 2010

great tutorial.

thank you.

Rochelle Dancel

April 13th, 2010

Although the overall design might be a little questionable, there are some great techniques demonstrated here.

In terms of tutorials that I’d like to see in future – I started following Six Revisions because of great step by step development tutorials like ‘Create A Slick And Accessible Slideshow Using JQuery’ – I’ve integrated that one in many designs. It would be great to see some more tutorials like that (e.g. jquery contact forms, horizontal scrolling anchors etc.).

I love a good Photoshop tutorial same as the next person, but you did ask! ;)

yahya

April 13th, 2010

great tut…
but would u like 2 make this tut again to convert from this psd to html n css.
thx a lot

Codesquid

April 14th, 2010

Sorry to be critical but I think this is a bad design for a kid’s website. Look at all that unbroken text? Young children won’t want to read it all, and probably can’t handle that much text in one go. Also, what’s with the massive eleborate drop-caps? Totally inappropriate for the design and confusing for a child to read or make sense of. This design is terrible. The only things that are appropriate are the bright, highly saturated colours. This tutorial looks like it was thrown together in 5 minutes without any real thought or effort. We expect better from Six Revisions.

bunda

April 14th, 2010

Thank you
at least I found new idea for my blog design
this topic is suitable for my blog

Jacob Gube

April 14th, 2010

@Rochelle Dancel: That was one of the hardest tutorials I’ve ever written, though it still continues to be one of the most popular pages here on the site. I’ll keep that in mind – I’ve been thinking of doing more of those though, and I have a couple that I’ve been working on, on and off. Thanks for the direction.

@Codesquid: feedback that outline what’s wrong is as good as feedback that outlines what’s right. Thanks.

arnold

April 14th, 2010

I thought designinstruct.com will tackle stuff when it comes to *designing in photshop ? hmm ,
anyway this is a good tutorial , its in the techniques use here, dont judge the final outcome , geez. and this is free

Jacob Gube

April 14th, 2010

@arnold: We’re trying to be a bit more autonomous with both sites. I would still like to post tutorials and articles on Web Design here on Six Revisions. However, I also want to shift towards more web development (or at least, front-end web development tutorials, as @Rochelle Dancel: had suggested) here.

Ronnie

April 15th, 2010

I think you are a great designer but something really went wrong with this ‘kids’ design. It may not be the final product yet, but it just does not fit in. Something, somewhere has really gone wrong with the design. I’m sure, otherwise, you’re a great designer.

Askar Sabiq

April 17th, 2010

nice tuts ! i’d like the folding effect, and the navigation looks good..

Maverick

April 18th, 2010

wow, that’s a lovely tut. nice design as well.

motiodesign

May 3rd, 2010

simple tut but yet a great post :)
thanks. Im searching for this one since im in a projects of making kid’s website

Stiefel Jakob

May 6th, 2010

hey, nice tut and nice design!
The navigation is very creative! Keep on posting.. :-)

jeprie

May 10th, 2010

This is disappointing. The idea using blocks of box is great. We can use it to show games thumbnail. Overall, this is an weird design. I have no idea what theme is this. If you want to stick with children, don’t just add many color above and use plain color below it.

The menu is kiddy theme but below it, is more like a professional theme.

I think you should try to find reference from babytv.com or playhousedisney site. That’s a real kid’s site.

heyhou77

May 26th, 2010

I don’t like it at all. As jeprie wrote , try to look at something what is REALLY working, not that crap sorry to say that. Keep in mind that these web use colors , icons and stuff, thats for “kid’s content” very important.

Good Luck next time!

Idea Theorem

June 8th, 2010

Its a simple and an easy tut. Great for beginners.

mrzeroman

June 19th, 2010

great ..thank u

marko recursos

August 15th, 2010

excelente tutorial¡ saludos desde perú

Leave a Comment

Subscribe to the comments on this article.