How to Design a Cute Kids Web Layout in Photoshop

FINAL RESULT

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.

Step 2 – Background

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

Result

Now we get the beautiful sky Background.

Step 3 – Rise of the Sun

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

Step 4 – Make-up

Apply the Bevel and Emboss Layer Style on Sun shape.

Step 5 – Kids Like Clouds

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

Step 6 – Make-up

Apply the this Gradient on Clouds.

And we also apply the Stroke on clouds.

Result

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

Step 7 – Rainbow

Select the Elliptical Marquee Toll to draw the Rainbow.

Step 8 – Colors of Joy

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

Result

We get a very colorful Rainbow.

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.

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.

Step 11 – Mud Hill

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

Step 12 – Greenery is Good

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

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.

Step 14 – Elements Additions

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

Step 15 – Elements add Spark

After adding the house and grass, add a Board.

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.

VOILA..!

How to Design an Elegant Small Business Web Template

FINAL RESULT

Step 1

Let’s start with the obvious step of opening a blank file. Today I’m giving it a size of 1200 x 1200 pixels. This is only because this template will contain a background image in surrounding margins of the web design. The design will be in the center part which will be about 900 pixels and the rest is marginal space.

Step 2

Now we fill the background with color # d9c3a2. The result should be like the image below.

Step 3

I was going to remove the logo design, but let’s put in the tutorial, you might derive some design inspiration out of it.  I have created a bulb looking path shape and filled it with red color. In the image below, I’m adding a drop shadow to that shape. You can find the values in the reference image.

Step 4

It’s time for some Bevel effect to make it look a little more 3D.

Step 5

Let’s do some finishing touches, and for that we add a gradient. Here are the values.

Step 6

These are the color values of the gradient.

Step 7

And last but not the least, a small 1px stroke to make it look above the template.

Step 8

Time to add company name, this will accompany the logo.

Step 9

After adding the company slogan, we should be getting this result. If you got the same, let’s move forward.

Step 10

Navigation Bar is next. We make a space for it in the usual manner, we create a path with Rectangle Tool and then we convert into a marquee selection by pressing Ctrl + Enter and the selection with plain white color.

Step 11

Add a little stroke to border the bar.

Step 12

Filling a little gradient in the background wouldn’t be a bad idea.

Step 13

Just the way we created space for the navigation bar, now we are creating its buttons. Color number is written in the image below.

Step 14

Some stroke around the button.

Step 15

Time for the search bar. I drew two shapes, one for the “search” button and one for the search text box.  Method of drawing and filling it with white color is the same as the previous steps.

Step 16

After filling the navigation bar with options, below is the final look of the navigation bar, with a mouse hover effect.

Step 17

Now we are taking on the Featured Area. I believe a featured area is necessary for almost all websites. It enhances visitor’s experience and allows them to view the important things easily. I’ll create the space for this area using the same old technique of making a path with Rounded Rectangle Tool and converting it to a selection and filling in the color depicted below.

Step 18

Let’s add a little drop shadow, these are the little graphics that make a template look catchy.

Step 19

Now some stroke, it is essential that you give every object a border so that it looks more visible.

Step 20

This is the shape we are looking to make.

Step 21

And after some effort, this is what we intend to make. A thumbnail and a description paragraph added. You can also make it a slideshow by using some JavaScript or Flash.

Step 22

This is almost done, now we are making a background for the headings in the content area.

Step 23

And the usual Drop Shadow effect we have been using should be applied here as well.

Step 24

And now we have added all the usual content. Below is the result image.

Step 25

The footer is simple as 1 2 3.

FINAL RESULT

This is what you have made. Be proud 

Creating a Dark Stylish Blog Layout in Photoshop

FINAL RESULT

Setting the Ground

A blank document, size of your choice, resolution 72. We do this every time 

We fill with background color #363535 and add some noise in background.

Logo

As usual, I’m just gonna make a platform for the logo. You’ll have the logo when you create a web design. Select Pen Tool and draw a shape, then go to Paths Panel and Right Click on the path and select Make Selection.

Add some Gradient in logo. Just a minor one, we wouldn’t want to overdo it.

How about some Drop Shadow.

And a slight stroke. Remember that we are adding all this using Layer styles. You can right click on any layer and click onBlending Options to open Layer Styles.

Now I needed a little text, I just added the obvious name. Added  a little Inner Shadow, and this is what I got.

Navigation Bar

I didn’t do much with menu because if we make navigation flashy, it’d snatch the spotlight from logo. Write the navigation bar options and choose the Rounded Rectangular Tool to draw the Search Area. I think you should add a rollover effect on the navigation bar, this is something I forgot. Sorry! 

Final Result of Header

Since this is a blog layout, the header should not be big in height so that the latest content can get as much space as possible.

Featured Area

I love Taylor Swift, her half-smile just kills me  so I chose her picture to use as the featured topic.
This White Box width is 960px. and this is our featured area.

I use this technique a lot, I drew another the shape with Rounded Rectangular Tool over the old one.

I created another Rounded Rectangle and filled an image of my favorite girl using our old friend Clipping Mask. To create a clipping mask, you just right click on a layer and click Create Clipping Mask.

Lets create a separator,  Rounded Rectangular toolonce again make a vertical shape. Fill with gray color and in second shape draw the Triangle using Custom Shape Tool.

I added some text, I don’t have to describe this step, right?

Result so far

Then come towards the Post area and choose the Rounded Rectangular tool.

Now I’m making a stylish icon the Date Mark. Choose the Ellipse Tool and draw the Shape. Opacity of this shape is 60%. Right click on the selected layer and add a little stroke.

Result of content

After adding an image and some dummy text.

We forgot “Read More” button, didn’t we? Choose the Rounded Rectangular tool and draw the Read More button shape and fill with color and 1px stroke.

Sidebar

Lets move towards the sidebar area. Choose the Rounded Rectangular tool and draw the shape.

I’m making a tabbed widget, if you dont know what that is, just carry on reading. Choose the Pen Tool and draw the shape and fill with color.

Here’s the final Close-up view of the the sidebar. The shape we drew in the previous step, that new has three tabs. And below it, we have the final preview of our sidebar.

Let’s have a look what we have accomplished so far. Result so Far

Slider

Usually this kind of sliders are placed above content and sidebar, but I thought let’s make below it since we already have a featured area up there. Choose the Rounded Rectangular tool and draw the shape.

I have added an image of a poster of a film. I used the Clipping Mask technique here again.  Then I added another rounded rectangle at the bottom inner end of the box. This will contain relevant text.

If you don’t want this area to use as slider, rather an Important Links section, we’ll need titles for each link. I have added the title, “movies”.

I created 3 boxes, you can make less or more. Your choice!

Footer

Again we create a Rounded Rectangle.

Choose the Rounded Rectangular tool once again and draw a hovering shape. You can see the result below.

After adding some text and social media icons, we get a very beautiful Footer area

FINAL RESULT

Ahh….. Finally after following a long tutorial, we got ourselves a very beautiful blog design.