PS web design tutorial XXX - Create a comic book themed web layout in PS

As a coder, my art foundation is weak. We can refer to some mature web PS tutorials to improve our design capabilities. To paraphrase a sentence, "If you are familiar with three hundred Tang poems, you can recite them even if you don't know how to compose them."

The tutorials in this series come from online PS tutorials, all from abroad, and all in English. I try to translate these excellent tutorials. Due to limited translation capabilities, the details of the translation still need to be worked out. I hope that the majority of netizens will give me some advice.

Convention:

1. The software used in this article is Photoshop CS5 version

2. The screenshots of the original tutorial are in English. I took them again based on the re-production. Chinese version of Figure

3. Some operations in the original text do not give parameters. I measured some parameters through repeated testing, which are shown in red text. For some wrong parameters, the correct parameters are displayed directly in red text

For example: (90, 22, 231, 77) , indicating that the coordinates of the upper left corner of the rectangle are (90, 22) , width 231, height 77

For example: (90,22), indicating that the coordinates of the upper left corner of the rectangle are (90,22), the other two parameters of the rectangle have been specified in the tutorial

4. My own experience will be attached at the end of the tutorial. Some are optimizations of some steps in the tutorial, etc.

Before Getting Started

Before Getting Started

Let's get it started! In order to speed up the reading I will avoid some of the most basic explanations (like how to create a layer mask or how to edit the handlers or Beziers of a vector shape). You will need some basic knowledge about Layers, Guides, Vector and Layer Masks, Brushes, the Pen Tool, and working with Typography (Character and Paragraphs).

Let’s get started! To speed up reading, I'll omit some of the most basic explanations (like how to create a layer mask or how to edit a Bezier vector shape). You will need some basic knowledge like layers, guides, vectors and layer masks, brushes, pen tools, and type tools (character and paragraph).

The first step is creating a mock up, doodle, or even just a sketch the layout on a napkin. Having a rough draft of the site's structure makes easy placing the elements on the design . Below you will see a simple sketch showing the following elements:

The first step is to create a mockup, doodle, or even just a sketch of the layout on a napkin. I have a rough draft of the structure of the website, making it easy to place some design elements. Below you will see a simple sketch showing the following elements:

A header, with the logo, search bar and social media links, besides the main navigation bar.

A header area with a LOGO, search bar, and social media links, in addition to the main navigation bar.

A banner, with featured posts, notice how the post text is placed over the image into a talk bubble to depict the "comic" style. Select the article and notice that the text content has been placed in the dialog box to portray a "comic" style.

A content area, with a list of posts displayed in two columns, each post have a picture associated and the text is shown into a talk bubble as well.

A content area , a list containing two columns, each list item has an associated image and the text is also displayed nicely in the dialog box.

A footer, with a list of the blog's categories, archive and popular post and recent comments and the copyright information.

A footer area, with a list of the blog's categories, archive and popular post and recent comments and the copyright information. Popular posts, recent comments and copyright information

##Step 1: Setting Up the Document

Step 1: Set up the document

Open Photoshop, download the 12 columns Photoshop template from 960 Grid System or create a new document 960px with and make draw some Guides to the left and right borders.

Open PS, download the PS template of the 12-column 960 grid system or create a new document, 960px wide, and draw some guide lines on the left and right sides

Increase the working area to see how it looks on wider resolutions and increase the height as well. I'm setting the document dimensions to 1420px width and 1200px height. Finally go to Layer > New Fill Layer > Solid Color… and set a Black (#000000) background for the canvas.

Adjust the working area to make it look wider, and adjust the height appropriately. I set the document to 1420 width and 1200 height. Finally click:

Layer > New Fill Layer > Solid Color

, and set the background color of the canvas to black.

Create a new document, size: 1420*1365, set the background color to black

Step 2: Header Background

Step 2: Header Area Background

Draw a horizontal Guide around 450px from the top border, we will use it as a reference guide to add a shade on top of the page. Using the Rectangle tool, draw a wide rectangle using this color as foreground (# AA0001). Then apply a Gradient Layer Mask (Black to White) to the rectangle in order to hide the bottom part of it.

Draw a horizontal guide line 450px down from the top edge, which we will use to Add a shadow on top for reference. Use the Rectangle Tool and draw a wide rectangle (0, 0, 1420, 450), with the foreground color: #AA0001. Then add a gradient mask (black to white) over the rectangle to hide the bottom.

Tip: do not ever use a Gradient Layer for backgrounds, because when increasing the height of the canvas (a very common practice in web design) the background gets distorted.

Tip: : Never use a gradient layer on a background because when the height of the canvas is adjusted (a very common practice in web design), the background will be distorted

Note: Also You can directly add the following gradient overlay to the rectangular layer to achieve the same effect. The color of the gradient overlay: #00000, #AA0001

Step 1: Add a Texture to theBackground

Step3: Add a Texture to the Background

Open the "Paper Texture" from the assets Copy and Paste it above the red gradient layer. Scale it in order to make it fit into the bounds of the design and change the layer's Blending Mode to Linear Burn. We will slice this as a large image background, but for wider resolutions we need to subtle merging the edges of the paper with the black background, for this, using the Burn Tool, darken the areas close to the Left and Right edges of our paper texture. You can use a big and soft Brush (0% Hardness).

Open Paper Texture from Materials, copy and paste it above the red gradient layer. Resize it so that it just fits the design of the entire head area and change the layer's blending options to Linear Burn. We are going to slice this into a large image background, but better advice, we need to subtly merge the edges of the paper with a black background, for this, use the Burn Tool, which will be close to the left and right of our texture The edges become darker. You can use a large, soft brush (0% hardness).

Always keep your layers organized, put both layers ("Paper" and "Rectangle") into a folder named "Header Bg".

To keep your layers organized, merge these layers (Paper and Rectangle) into a folder called Header Bg

Step 1: Sunbursts

Step4：Sunbursts

Moving forward with the comic style, let's add some sunburst stripes to create a dramatic background for the logo.

Open the "Sunburst" shapes from the assets. On the Custom Shape tool, choose your favorite sunburst shape an draw it over the red gradient layer. Place the shape to near to the left border of the 960 template ( show the Guides to see the bounds). Apply to the "Sunburst" layer a Radial Gradient Layer Mask (white in the center and black in the outside). Change the Layer Opacity to 50%. Optional: using an irregular Brush, paint with Black over the Layer Mask to create a more grunge merge between the sunburst and the background.

Open the Subburst shape in the material. Open the Custom Shape Tool, select your sunburst shape, and draw it on top of the red gradient layer (Color: #C30000). Place the shape close to the left side of the 960 layout template (turn on the guides to see the boundaries). Give the Subburst layer a radial gradient mask (white in the center, black on the border). Change the layer's opacity to 50%. Optional: Using an irregular brush, paint with black on top of the layer mask to create a more stained union between the sunburst and the background.

Step 1: Halftone

Step5: Halftone

In order to enforce the comic style, we will add some Halftone points over the header background. Create a new layer above the "Sunburst" layer, and render some Black and White Clouds in there (Filter > Render > Clouds). Then go to Filter > Pixelate > Color Halftone. Change the "Halftone" layer's Blending Mode to Multiply and add a Layer Mask > Hide All to it. Then using a big and soft Brush (Color: White and Opacity and Flow to 75%) paint some areas of the layer mask to make visible only a bit of the halftone pattern.

To implement the manga style, on the background of the head area we will add some halftone dots. Create a new layer on top of the Sunburst layer and render some black and white clouds in there (click on: Filter > Render > Clouds ). Then click: Filter > Pixelate > Color Halftone. Change the Halftone layer's blending mode to Multiply and add: Layer Mask > Hide All. Then use a large, soft brush (color: white, opacity and flow at 75%) to paint some areas of the layer mask so that only some of the half is visible Tonal pattern.

#Step 1: The Title

Step6：Title

Now you have the header background finished, let's add the Logo. First draw a reference Guide around 180 px below the top border, the logo shouldn't be below that guide. Using the "Komika Title" font face from the assets type the title of the site ("Cicastic") Font Size: 68pt and foreground color: #FFB401. Then Add more text element, like the exclamation sign or the slogan in white (font size 16pt).

Now that you have completed the background of the head area, let’s add the logo. First, draw a horizontal guide line 180px down from the top edge. The logo will not be below this guide line. Use the Komika Title font in the resource pack and enter the title of the website (Comicastic), font size: 68px, color: #FFB401. Then add some text elements, like the white exclamation mark (font size: 76px) and the slogan (font size: 16px)

Then using the Free Transform Tool rotate the text a few degrees left to make it look less formal. Try to get something like the image below, but remember not to place any element below the guide. Finally put all these layers into a folder labeled " Logo. , and made vertical chamfers)

to make it look less formal. Try making something like the image below, but remember not to place elements below the guides. Finally merge these layers into a folder named Logo

Step 7: Logo Layer Styles

Step 7: LOGO Layer Style

Add a Layer Style > Gradient Overlay (#EA9403 – #FFC501) a Stroke (Size:1px, Inside, #FCB600) and a Drop Shadow (Black, 50% Opacity, Distance and Size: 2px) to the "logo" layer. Use a similar Style to the slogan, but change the colors of the Gradient Overlay to #EDEDED - # FFFFFF and the Stroke to White (#FFFFFF). If you place the exclamation sign to the logo, you can try converting it into a shape (Layer > Type > Convert to shape) and distorting it a bit as shows the bottom of the image below.

Add layer styles to the Logo layer: Gradient Overlay (#EA9403- #FFC501), Stroke (size: 1px, inner, #FCB600), Drop Shadow (black, opacity 50) %, distance and size: 2px). Give the slogan a similar layer style, but change the gradient overlay color to #EDEDED - #FFFFFF and the stroke to white ( #FFFFFF ). If you have an exclamation point in your logo, you can try converting it to a shape (

Layer > Text > Convert to Shape

) and distorting it a little bit like in the bottom image below. (

This step has been replaced by bevel cutting before, there is no need to do it again

)

Layer style of LOGO

Layer style of slogans and exclamation points

##Featured Posts Banner

Featured Posted Banner

Step 8: Background

Step 8: Background

Use the Rounded Rectangle Tool (Radius 5px) to draw a wide rectangle all across the banner below the logo as shows the image below, the height if the rectangle is up to you, I'm setting 250px. Then apply a Gradient Overlay (Colors: #DA7E00 – #F0AD00, Angle: 90°) and Stroke (Color: #F2AA00, Size: 1px, Position: Inside).Layer Styles to it.

Use

rounded rectangle Tool (radius: 5px) draws a wide rounded rectangle (240, 180, 940, 250) that passes through the banner below the LOGO, as shown in the picture below. The height of the rectangle depends on For you, mine is 250px. Then add a gradient overlay (color: #DA7E00 - #F0AD00, angle: 90) and stroke (color: #F2AA00, size: 1px, position: inside) style

# to the layer

#Step 9: Changing the Top Banner

Step 9: Change the top of the banner

Using the Direct Selection Tool (A) over our brand new rounded rectangle, grab the points of the top left corner and move them to the right (you can use the cursors for an accurate move). Then move the bottom right points a few pixels left.

Use

Direct Selection Tool

In the new rounded rectangle we created, drag the upper left corner to the right corner points (you can drag with your cursor exactly). Then drag the lower right point to the left. (In fact, after pressing Ctrl + T to free transform, right-click and select Distort, drag the upper left corner point to the right, H: 13.97; drag the lower right corner point to the left, H: -7.07. This can also To achieve the same effect)

Step 10: Adding the sliding picture container

Step 10: Add sliding image content

Now, using the Rectangle Tool draw a gray rectangle inside the yellow banner (630px x 250px aprox.), you can leave the bottom part of the gray rectangle a few pixels away to the bottom of the yellow banner to create an out-of-bounds effect. Add a Stroke (Size: 1px, Position: Inside, Color: #FFFFFF) and a Drop Shadow ( Color: #000000, Opacity:50%, Distance: 0px, Spread: 0px, Size: 5px) and try to place the rectangle as shows the image below. Finally, put both layers (Gray and Yellow rectangles) into a folder named " Top Banner".

Now, use the Rectangle Tool Draw a gray rectangle inside your yellow banner (360, 190, 630, 250) (630px*250px), you can make the gray The bottom of the rectangle is positioned a few pixels away from the yellow banner to give an out-of-bounds effect. Add Stroke (Size: 1px, Position: Inside, Color: #FFFFFF) and Drop Shadow (Color: #000000, Opacity: 50%, Distance: 0px, Extension: 0px, Size: 5px) and try as shown in the image below Lay out the rectangle. Finally, merge all the layers (gray and yellow rectangles) into one folder Top Banner

##Step 11: Main Navigation

Step 11: Main Navigation

Using the font family "Komika Text " type the pages navigation at the top right of the top banner, set the font Size to 18px and color: #FFFFFF. Put it on a folder named "Pages Navigation", be sure this folder is behind the "Top Banner". Then using the Rounded Rectangle Tool (Radius: 3px, Color: #EFA800), draw a rectangle just behind the first word of the navigation, name the layer "Selected Tab". Next using the Direct Selection Tool (A) move the points of the bottom left as shows the image below. Next apply a Gradient Overlay to the "Selected Tab" layer (Colors: #F0A900 – #FEBF00, Angle: 90°). If you want to, you can add a very subtle Drop Shadow (Color : #000000, Opacity: 25%) to the navigation text.

Enter the page navigation using the font Komika Text on the upper right side of the top of the banner, set the font size to 18px, and the color: #FFFFFF. Put it into a folder Pages Navigation, making sure the folder is behind the Top Banner. Then use the

Rounded Rectangle Tool (radius: 3px, color: #EFA800) to draw a rounded rectangle (828, 149, 92, 40) at the first position of the navigation bar After each option, name the layer Selected Tab. Next, use Direct Selection ToolDrag the lower left corner as shown below (After pressing Ctrl + T to free transform, use Bevel, drag the upper left corner point to the right, H: -14.04). Then add a gradient overlay (color: #F0A900 - #FEBF00, angle: 90 degrees) in the Selected Tab. If you want, you can add a subtle drop shadow to the navbar text (color: #000000, opacity: 25%)

##Step 12: Add the banner images

Step 12: Add the banner image

To show an actual sample, paste any image over the banner. If the image is bigger that the rectangle you can use a Clipping Mask, for this paste the image above the gray rectangle, then Option / Alt – Click between the two layers, this will clip the image inside the rectangle no cropping needed.

To show the real image, paste any image on the banner. If the image size exceeds the rectangle, you can use a clipping mask. For this pasted image above the gray rectangle, Alt-Click between the two layers. This will clip the image to fit within the rectangle without clipping.

Note: It is equivalent to right-clicking on the picture layer to add a clipping mask

Step 13: Banner Controls

Step 13: Banner Control Button

Select the Custom Shape Tool and chose one of the arrows, and draw a couple one next to the other, both pointing left. Then Apply to both a Gradient Overlay (#6D0004 – #980000) and a Stroke (Size: 1px , Position: Inside, Color: #B20002). Put both arrows into a folder named "Prev" and using the Free Transform Controls and holding the Command / Ctrl key, distort the arrows a little bit. Then duplicate the folder and rename it to "Next", move it to the right of the banner and go to Edit > Transform > Flip Horizontal to change its direction. Finally put both folders "Next" and "Prev" into a new folder named "Controls".

SelectCustom Shape Tooland select one of the arrows and draw a pair, one next to the other, both pointing to the left. Then give them a style, gradient overlay (#6D0004 - #980000) and stroke (size: 1px, position: inside, color: #B20002). Merge these arrows into a folder named Prev, use the Free Transform Tool, hold down the Ctrl key, and twist the arrows a little bit. Then copy the folder and rename it Next, move it to the right side of the banner and click: Edit > Free Transform > Flip Horizontal Change their orientation. Finally, merge the Next and Prev folders into the Controls folder

##Step 14: Controls Hover

Step 14: Floating Button

Now duplicate the "Next" and "Prev" folders and apply a different layer style to the arrows in order to create a hover effect for each one. I 'm Copying the Layer Style from the exclamation sing of the title.

Now copy the Next and Prev folders and add a different layer style to each arrow to create a floating effect. I copied the layer style of the title slogan. (

This is useful when converting to HTML, skip this step for now)

Step 15: Halftone details

Step 15: Halftone Details

With the same process of Step 5, create a Halftone Layer above the yellow banner. With the "Halftone" layer selected do Command / Ctrl – Click over the yellow banner, then hit Command / Ctrl + Shift + I to invert the selection, then delete the exceeding. Change "Halftone" layer's Blending Mode to Overlay and Opacity to 25%. Finally add a Layer Mask > Hide All and using a big soft White Brush, paint over some areas on the layer mask to make visible only a few portions of the pattern.

Same process as step 5, create a Halftone layer on top of the yellow banner. With the Halftone layer selected, press Ctrl + Click on the yellow banner layer, then press Ctrl + Shift + I to invert the selection and delete the excess. Change the Halftone layer's Blending Options to Overlay and its Opacity to 25%. Finally click: Layer Mask > Hide All, use a large soft white brush to paint some areas in the layer mask so that part of the pattern can be shown.

#Step 16: Featured Article Talking Bubble

Step 16: Featured Article Talking Bubble

Now is time to add a field to put the featured post's content . For this, using the Custom Shape Tool look for the Rounded Cornered and Rectangular talking bubble. Draw it over the "Featured Image" Banner and place it on the right as shows the image below. Before designing any of this features you need to do some research if it's possible to achieve this kind of effect, even if you don't know how to code, you can look for some existing libraries of Ajax (JQuery / MooTools) and see what is already done and working, and then adapt your design to an existing library.

Now it’s time to add an area for featured posts. To do this, use the

Custom Shape Tool to select the rounded rectangle of the talk box. Draw it above the Featured Image banner and place it on the right as shown below. Before designing any of this functionality you need to do some research to see if it is possible to achieve this effect, even if you don't know how to code for Ajax you can look at what some existing libraries (JQuery/MooTools) have already done What works, then adapt your design to existing libraries.

Then, using the Direct Selection Tool (A) distort the shape of the bubble a little bit. Finally apply a Drop Shadow (Color: # 000000, Opacity: 25%, Distance: 5px, Spread: 0px, Size: 10px).

Then, use the
Direct Selection Toolto distort the shape of the talk box a little bit. Finally add drop shadow (Color: #000000, Opacity: 25%, Distance: 5px, Expand: 0px, Size: 10px)

Step 17: Featured Post Text

Step 17: Featured Post Text

It's time to add the title and a brief to our featured post. For the title use "Komika Title", 18pt. #680001. For the Body text, use "Komika Text Tight", Size: 16pt, Color: #1B1B1B. Place the text layers right aligned as shown on the image below.

is when we add a title and introduction to our featured column post. The title uses Komika Title font, font size: 18px, color: #680001. Paragraph text, use Komika Title font, size: 16px, color: #1B1B1B. Place these text layers right aligned as shown below

Step 18: Comments Box and Post Meta

Step 18: Reply box and list information

Now, add another bubble, but smaller this time, use this color as foreground: #9C0001 and add a Stroke layer style (Color: #D00000, Size: 1px, Position : Inside), just as shows the image below, then add the comments number with "Komika Title" font face, Color: #FFFFFF and Size: 24pt. And the word "Comments" with "Komika Title", Size: 12pt, Color : #FFB301.

Now, add another talk box (It is recommended to directly copy the previous talk box and then adjust it appropriately), but this time it is smaller and the foreground color is # 9C0001, and add the stroke layer style as shown below (color: #D00000, size: 1px, position: inside), then add the number of the reply, the font is Komika Title, color: #FFFFFF, size: 24px; text Comments , font Komika Title, size: 12px, color: #FFB301

#Finally add a small Meta (information about the post) below the post brief with "Tahoma" font, Size: 10pt, Color: #1B1B1B. If there's no enough space to put the Meta text, you can use the Direct Selection Tool to increase the height of the featured post bubble box a little bit.

Finally add a small meta-information (listing information) below the post introduction, font: Tahoma, size: 10px, color: #1B1B1B. If there is not enough space to place the informational text, you can use the

Direct Selection toolAdjust the height of the featured column label talk box a little

Tip: Do not ever transform a Vector Rounded Corner element using the Free Transform Tool in Photoshop, this will distort the corner, select the points you want to move using the Direct Selection Tool and then displace them.

Tip: Never use the Free Transform tool to transform vector fillet elements in PS. This will distort the fillet. Use the

Direct Selection tool to select the points you want to move and move them.

Step 19: Featured Post Title's background

Step 19: Featured Post Title's background

Duplicate the featured post background bubble, hide the drop shadow, change the fill color to yellow (#FFC001) and rasterize it. Then, using the Rectangular Marquee Selection Tool, select all the yellow bubble below the title line, then Delete the selection. Next, add a line of border, with the "Bubble Title" layer selected, Command / Ctrl – Click over the "Bubble Background" Vector mask. Then Go to Edit > Modify > Contract and set the value to 1px. Finally, hit Command / Ctrl + Shift + I to invert the selection and delete it.

Duplicate the featured post’s background talk box, hide the drop shadow, change the fill color to yellow (#FFC001) and rasterize it. Then, use the

Rectangular Marquee Tool to select the entire yellow talk box below the title line, and then delete the selected content. Next, add a border line and, while the Bubble Title layer is selected, Ctrl + Click on the vector mask of the Bubble Background layer. Then click: Edit > Modify > Shrink, set the value to 1px (recommended 2px, more obvious). Finally, press Ctrl + Shift + I to invert the selection and delete the selection content (You can also add a 2px white stroke directly to the Bubble Title layer to achieve the same effect)

This is a good time to set everything related to the top banner organized into folders and add more detail if you want to, I'm adding a yellow line between the Post brief and the Meta.

This is the setting Any stuff related to the top banner is a good time to organize into folders and add more details you want to add, I added a yellow

(#ffc000) line (927, 302, 288 , 1) Between the publication introduction and meta information

On the left side of the banner, add the caption FEATURED NEWS. Color: #FFFFFF; Font: Komika Title; Font size: 24px; Line spacing: 24px. And add the following layer style. Finally press Ctrl + T to free transform, angle: -74.

Colors for gradient overlay: #EEEEEE, #FFFFFF

Stroke color: #FFFFFF

#Main Content

Main content area

Step 20: Content Background

Step 20: Background of the content area

Now let's move forward with the main content background, create a Folder named "Page Content" and draw a white (#FFFFFF ) Rounded Corner Rectangle (5 px radius) several pixels height (If the original canvas size becomes too small at this time you can increase its size, just ensure to keep the top border as is).

Now let’s Focus on the background of the main content area, create a folder named Page Content and draw a white ( #FFFFFF ) rounded rectangle a few pixels high

(240, 452, 910, 544)

(Radius: 5px ) (If the size of the canvas feels too small at this point, you can increase its size, just make sure the top banner you created earlier doesn't move)

Step 21: Post Image

Step 21: Post the image of the article

It's time to start adding content to the page, as default on blogs we will design a list of the latest posts.

It's time to start adding content to the page, as default on blogs we will design a list of the latest posts. A list of the latest releases

Draw two squares (3 columns width aprox.) and place them as shows the image below. Doing the same process than step 12 add some images over the squares using them as Clipping Masks. Finally select the square and add a Stroke Layer Style to it (Color: #FFB801, Size: 1px, Position: Inside).

draw two squares（250，462， 228,228), (710,462,228,228) (about 3 columns wide) and place them as shown below. As in step 12, add some images to the square, like using a clipping mask. Finally, select the square and add a stroke (color: #FFB801, size: 1px; position: inside)

##We will work over one of this images adding the content around it, and then duplicate it as many times as post want to show on the homepage.

We will work over one of this images adding the content around it, and then duplicate it as many times as post want to show on the homepage. times and arrange the posts how you want

Step 22: Add posts' Titles and Categories.

Step 22: Add the title and category of the list

Draw two wide rectangles, one yellow (#F2AA00) and another White with yellow border below (#FFB401). Over the yellow stripe, type the title of the post using "Komika Title", Color: #670003, Size: 18pt. And on the white stripe, type the Categories names using "Komika Text Tight" Size: 13pt, Colors #212121 for links and #670003 when mouse over.

Draw two wide rectangles, one yellow ( #F2AA00 ) with yellow edges

( #FFB401 ) (250, 616, 300, 28) and the other below White with yellow edge (#FFB401) (250, 643, 270, 28) . On the yellow rectangle, enter the title of the list, font: Komika Title, color: #670003, size: 18px. On the white rectangle, enter the name of the category, font: Komika Text Tight, size: 13px, link color: #212121, mouse hover color: #670003

Step 23: Post brief and Meta

Step 23: Post brief and meta information

Draw a talking bubble again, over the picture and the yellow stripe, fill it with this Color: #333333 with a 1px Stroke (Color: #696969) and also apply the Drop shadow we did before on the banner. Then add the a sample brief text using "Komika Text Tight" Size: 14pt, Color: #FFFFFF, a sample Meta text using "Tahoma" 10pt Color #979797 and if you want to a line between both texts (#4B4B4B).

Draw a talk box again, above the image and the yellow rectangle, give it a fill color of #333333, a 1px stroke (color: #696969) and add the drop shadow style we added to the banner before. Then add a sample intro text, font: Komika Text Tight, font size: 14px, color: #FFFFFF; a sample information text, font: Tahoma, font size: 10px, color: #979797, and the split you want to add between them Wire (Color: #4B4B4B)

#Step 24: Finishing the main content

Step 24: Complete the main content area

To finish this part add a Comments bubble , basically repeating the process of Step 18. Then put everything on folders, I'm naming the post folder "A post". Then, duplicate it (Command / Ctrl + Drag) and place it on the right. Repeat the process with two or three rows of post as shown at the bottom of the image below. Increase the height of the white background as needed to fit all the post in.

To complete this section, add a reply talk box, Basically repeat the steps in step 18

(you can copy the talk box in step 18 and adjust the size appropriately, the font size of the reply number: 18px, the font size of COMMENTS: 10px) . Then merge them into a folder, I named the folder A Post. Then copy (Ctrl + Drag) and place it to the right. Repeat this process as shown below to make the list two to three rows. Adjust the height of the white background to include all posts.

##Step 25 : Page Content Corner

Step 25: Corner of the content area

To increase the "comic book" style, we will add a simple page curl at the bottom right of the white background.

In order to add a Comic book style, we need to add a page curl effect to the bottom right corner of the white background.

First draw a Black Triangle at the bottom right corner (you can use the Pen Tool), then duplicate it and move the triangle making it a "reflex" of the black one, you can fill this copy with any other color. Next warp the second triangle making it a little curve. Then, apply to the warped triangle a Gradient Overlay using a nice mix of colors: (#9C0001 – #FE0000 – #9C0001) and change the Angle to anything that looks good according to the angle of the curl, in this case 108 degrees. Next using a Soft Brush (Black, Opacity and Flow 50%) paint some shadows in a new layer behind the warped triangle. If you want to, add some points to the warped triangle in order to add a rounded corner to the tip just as shows the bottom of the image below. Finally, put all the curl related layers into a folder named "Page Curl". Keep it handy because we are using it later.

First draw a black triangle in the lower right corner (you can use the Pen Tool ) ( It is recommended to use the Rectangle Tool to create a rectangle (1098, 951, 52, 45), Then use Direct Selection Tool to select the upper left point, delete it to get the triangle ), then copy it and move the triangle to make it a black "reflection", you can fill this copied triangle Any color. Next bend the second triangle so that it becomes a little bit curved. Then, give the curved triangle a gradient overlay using a nice blend of colors ( #9C0001 - #FE0000 - #9C0001 ), adjusting the angle of the gradient according to the angle of the bend to make it look more comfortable, in this case 108 degrees. Next use a soft brush (black, opacity and flow 50%) to add a shadow to the curved triangle in a new layer. If you want, add some points on the curved triangle to give it a rounded corner, like in the image below. Finally, merge all the curved layers into the Page Curl folder. Put it in a prominent place because we will need it later.

Step 26: Footer Background

Step 26: Footer Background

We are almost done, first create a folder named "Footer" and ensure is below the "Page Content" folder, inside it draw a red (# 9C0001) circle, then apply a Gaussian Blur of at least 65px radius. Then transform the resultant blurred circle to make it match with the bounding guides.

We are almost done, first make sure it is under the Page Content folder Create a new folder Footer, draw a red (#9C0001) circle

(560, 850, 300, 300) inside, and then add a Gaussian blur with a radius of at least 65px. Then transform the resulting blurred aperture (240, 787, 910, 420) so that it fits the border's guide line.

##Step 27: Background sunbursts

Step 27: Background sunburst

Now, with the Custom Shape Tool, select one of the Sunburst shapes and draw a black one in the middle, then down its Opacity to 50%. Then add the Halftone Pattern over the red glowing circle, hide it using a layer mask and show only some parts of it. Finally down the opacity of the red circle to 50%..

Now, use the Custom Shape Tool, select a sunburst pattern in the middle Draw a black sunburst pattern and lower the Opacity to 50%. Then add a halftone on top of the red circle glow and hide it with a layer mask, showing only a small part of it. Finally, change the opacity of the red circle to 50% (It is recommended that 70% is better).

Step 28: Footer content background

Step 28: Footer content background

We will add common elements of a blog such Categories and Archive on the footer.

We will add a common category of blog in the footer. and archive elements

Now, let's add a background for the footer elements, draw a Rounded Rectangle (5px radius) Color:#1A1A1A and set its Fill value to 50%, making it around 3 columns wide. you can create copies of it to make fit 4 boxes at the footer.

Now, let’s add a background to the footer element and draw a rounded rectangle(240,1050 , 220, 250) (radius: 5px), color: #1A1A1A, and set the padding to 50% so that it is 3 columns wide. You can create a copy of it so that it fits exactly 4 times into the entire footer

Step 29: Footer content background – Curl

Step 29: Footer content background - angled corner

Select the first rectangle, (you can delete the others at this point). Then duplicate the "Page Curl" folder and place it inside the "Footer" folder, transform it to make it match with the bottom right corner of the rectangle, then change the colors of the gradient to different tones of gray. Finally add to the rectangle layer a Stroke style (1px, Inside, #242424).

Select the first rectangle, (you can delete the other rectangles). Then copy the Page Curl folder and put it into the Footer folder, transform it so that it fits the lower right corner of the rectangle (Recommended zoom 70%), and then change the gradient overlay color to a different stone gray (respectively: #232323, #97918a, #252525) . Finally add a stroke to the rectangle (1px, inside, #242424)

Step 30 : Categories

Step 30: Categories

Now, add the title of the section, in this case "Categories" using "Komika Title", Size: 14px Color: #F2AA00. Use guides to delimit the title baseline, keep it at least 20 px below the end of the page content background. Then add some rows as sample categories, using "Komika Text Tight", Size: 16px, Color: #FFFFFF, and Red (#EC000A) as hover effect. As an additional detail for the hover effect, add a little yellow (#FFB301) arrow using the Custom Shape Tool. Put all the layers into a folder named "Footer Element".

Now, add a title to this section, in this case Categories, using font: Komika Title, font size: 14px, color: #F2AA00. Use guides to define the basic line of the title, keeping it at least 20px below the background of the main content area. Then add some categories, using font: Komika Text Title, font size: 16px, color: #FFFFFF, red (#EC000A) is a floating effect. As an extra detail to the floating effect, add a small yellow ( #FFB301 ) arrow using the Custom Shape Tool. Merge these layers into a folder named Footer Element

Step 31: Duplicate the footer section

Step 31: Duplicate the footer section

Duplicate the "Footer element" folder and move it to the right, change the words to depict "Archives" this time.

Copy the Footer element folder and move it to the right, this time describing it with the text Archives.

Then duplicate the folder again but this time expand the translucent background to make it twice wider, on top, type the titles for "Popular Posts" , "Latest Posts" and "Recent Comments", use yellow for the first one and gray for the other two. As you guess, this will have a similar functionality than a tabbed pane. Then add a little yellow triangle to mark the selected tab .

Then copy the folder again but this time expand the translucent background to 2 times wider (parameters of the rectangle (720, 1050, 460, 250)) and at the top, enter a title For Popular Posts, Latest Posts, and Recent Comments, use yellow (#F2AA00) for the first one and gray (#5A5A5A) for the other two. As you guessed, this will have a tabbed pane-like functionality. Then add a little yellow triangle marker on the selected tab.

Step 32: Tabbed pane content

Step 32: Tabbed window Grid content

Since this part will have mostly lists of posts, lets add them, basically is a combination of "Komika Title" and "Komika Text Tight" with different colors (See the screenshot below). The first row will be a sample of the selected (hover) item, on this, add a black (#000000) rounded rectangle behind the text and add a Horizontal Gradient (Black to White) Layer Mask.

Because This section will have a large list of releases, let's add them, basically using a font combination of Komika Title and Komika Text Tight, in different colors (see screenshot below). The first row is a selected row (floating). Here, add a black (#000000) rounded rectangle behind the text and add a horizontal gradient (black to white) layer mask

Finally, add a little Pager at the bottom of this section.

Finally, add a page number at the bottom of this section

Yellow title Color: #F2AA00; color of paragraph text: #909090; color of yellow page numbers: #F2AA00; color of gray page numbers: #484848

##Step 33: Search Bar

Step 33: Search Bar

It's time to add some details to finish up our graphic. Let's start with the search bar. Create a folder named "Search Bar" on top of everything, create a Rounded Rectangle (3px Radius, Color: #000000 with a Stroke Effect Size: 1px, Position: Inside, Color: #7C0000) as the search input, and a small rectangle for the search button; Copy the Layer Style of the selected item on the main navigation and paste it to the search button. For the actual button, type the word "Go!" over it with White, and apply the same Drop Shadow than the main navigation text (recycling layer styles is a great time saver). On the Search input, type the Word "Looking for something" using "Komika Text Tight" Color: #F9A600.

Now it's time to add some details to complete our piece. Let's start with the search bar. Create the Search Bar folder on all layers and create a rounded rectangle (939, 11, 180, 30) (Radius: 3px, Color: #000000; Fill: 50%; Stroke: 1px, Position: Inside, Color: #7C0000) as the search input box, and a small rectangle (1128, 11, 61, 30) as the search button; copy the main navigation bar layer style of the selected item and paste it to the search button. For the actual button, enter the white text GO! , then add the same drop shadow as the main navigation bar (recycling layer styles is a great way to save time). In the search input box, add the text Looking for something, font: Komika Text Tight, color: #F9A600

# #Then add a Rectangle behind all the layers inside "Search Bar", fill it with a dark red #380001 (Fill: 50%) and apply a Stroke using this Color: #890101. Convert it to a Smart Object and apply a Layer Mask > Hide All to it, fill the mask with a Reflected Black – White Gradient to create the effect show at the bottom of the image below.

Add below all layers in the Search Bar folder Make a rectangle

(720, 0, 560, 50) , fill it with dark red (#380001, Fill: 50%) and add a Stroke style, color: #890101. Convert it to a Smart Object and click: Layer Mask> Hide All and use a symmetrical black-white (i.e. black-white-black gradient) The gradient fill mask creates the effect as shown below

##Step 34: Social Media Icons

Step 34: Social Media Icons

Repeat the process of the search bar background but this time using a less height bar and with a sightly different Stroke color (#860001). Then type the word "Follow us" using "Komika title" and paste all the icons you want to add, you can use the mini icons from the assets. Don't forget to keep your layers organized under folders .

Repeat the process of making the search bar background, but this time have a smaller height

(480, 33, 470, 25)

, and another pleasing stroke color ( #860001). Then enter the text Follow us, use Komika title as the font, and then paste all the icons you want to add. You can use the mini icons in the material pack. Don’t forget to organize your layers in a folder

Step 35: Footer navigation and copyright information

Step 35: Footer Navigation and Copyright Information

Finishing today's work, let's add the Footer navigation. Delimit the section with a white Line, masked with a reflected black – white gradient. Type the navigation links using Arial, Size 10px, Color: #515151 and highlight a hover effect with yellow: #F2AA00. Then add the copyright text Right aligned.

To finish today’s work, let’s add footer navigation. Separate it with a white line (230, 1322, 960, 1) and mask it with a symmetrical black-to-white gradient. Enter the navigation bar link, font: Arial, font size: 10px, color: #515151, and highlight the color of the floating effect: #F2AA00. Then add copyright information on the right

Step 36: This is it!

Step 36: Done! !

Finally double check all the layers are on its respective folder.

Finally double check all the layers are on its respective folder.

Final rendering

Postscript: This tutorial uses and Other tutorials have different techniques (using a lot of direct selection tools to create special shapes, and using masks to achieve many effects), and the overall style is slightly different from other tutorials. A lot of cartoon book styles are unique.

For more PS web design tutorials