How to insert text and images into a blog layout in Photoshop

As you have already learned how to create a basic structure of a blog layout in the first part, this tutorial will show you some basic idea to insert and place images on a web page. You will also learn how to choose fonts, their styles, appropriate size and color according to the type of layout.
Follow this step by step guide to learn how to insert text and images into a blog layout in Photoshop.


Step # 1 – Insert a Logo

In the first step, launch Adobe Photoshop and load the basic structure of the blog layout which we created in the previous part. Now open a “Logo” image, place it on the top left corner of the page. Change this layer name to “Logo”.

Add a site’s logo

Step # 2 – Insert social network icons

In a similar way, open few social networking icons and place them on the top right corner of the page. Combine these layers into a group and rename it to “Icons”.

Add social network icons

Step # 3 – Insert Text for the Main Menu

Once done, move over to the “Menu green” group, select the “Text” tool, choose “Fonts” as “Verdana”, “Style” to “Bold”, set its “Size” to “20 pt”, “Color” to “White” and create labels over the green menu bar.

Add text for the main menu

Step # 4 – Insert Text for the Sub Menu

Now move over to the “Menu yellow” group and click on it for it to expand. Insert labels on this menu by using the same style of fonts and color.

Add text for the sub menu

Step # 5 – Insert Text for the Search Box

Add text over the “Search bar” by using fonts in “Italic” style and “Black” in color. Now select the “Custom Shape” tool from the menu and choose the “Magnifying glass” shape. Draw it next to the text in the search bar.

Add text for the search box

Step # 6 – Insert the Main Blog Text

Once done, move over to the “Main img” group and insert heading and content in the right column.

Add text for the main blog

Step # 7 – Insert a Main Blog’s Image

Now load a picture, rename it “Main img”, place it right on top of the “Main img” shape and create a clipping mask. After clipping it, adjust its size and place accordingly.

Add an image for the main blog

Step # 8 – Insert Flip Buttons

In order to add “Flip buttons”, select the “Ellipse” tool, choose its color as “7d98a2” and draw small circles at the bottom part of the image. Choose the “d6e8ef” color and draw a bit smaller circle for creating a “Selected button”.

Add flip buttons

Step # 9 – Insert Featured Blogs Text

Now move over to the “Main blog” group and insert text for the blog heading, description and button’s title by using the same fonts of “Verdana” with the size of “15 pt”.

Add text for featured blogs

Step # 10 – Insert the Featured Blog’s Image

Once done, load a picture, move it right on top of the “Img1” shape layer. Now create a clipping mask, adjust its size and place it accordingly.

Add an image for featured blogs

Step # 11 – Complete Rest of Featured Blogs

In the same way, insert text and place images in rest of the blogs and move over to the “Side bar” group.

Add text and images to rest of featured blogs

Step # 12 – Insert Text for the Side Panel

Now insert text for the “Ad Space”, “Blogs links” and “Flickr” title using the same fonts of “Verdana” in the side panel.

Add text for the side panel

Step # 13 – Insert a Copyright Text

In the final step, insert a copyright statement at the bottom of the page and your blog layout with text and images is complete.

Add a copyright text