Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Comic book page

Comic book page


I used adobe photoshop 7. You can probably use older versions as well. With this graphic tutorial you can create a comic book cover or page out of a comic book. This comic book image is one which I have created for UC Davis VSA Organization as a splash for their new website, yet to be published. So please use this tutorial to help you, but recreate exactly what I have shown you. thanks. e-mail me with any questions. So lets begin.

1. Lets begin by creating a blank canvas 750x721 by hitting ctrl+N

2. Lets first do the outline of our comic book page. Use the rectangle tool and draw out a box like how I have in the screenshot. Also lets add some basic shadow effects as well as a stroke effect so it stands out. The stroke should be set to the inside at 1px with a color of black. here is how the shadow settings should like:

image 1

3. Next we will add the different boxes that seperates each frame of the comic. You can do as many as you like and whatever shape you like. Iit just depends on the story you are trying to convey. On those boxes you make, lets add a 4px black stroke on the outside of these boxes. For me this is how it looks:

image 2

image 3

4. Next is teh creative part. This section depends on your story. For me, i just put random images in from UC Davis VSA organization since I design this comic book image as a splash for their new webpage. To insert it, I simply did it the long way, but very easy. first resize your image to the right size you want it, then just drag it ontop of the boxes you made. Use the Free Transform tool (located on the top Edit toolbar)to resize it more into detail so it fits right inside the strokes you made, so the strokes are showing. An easier way, is just to skip the box step, and simply just add your images in and resize them accordingly and then just go to Blending options by right clicking on the Layer image, and give it the same 4px black stroke you gave the boxes in the previous steps. The reason i didnt do this was simply, i thought of it afterwards, and was to lazy to go back and edit. I also added some minor color details, what I have done if you have any specific questions, email me, otherwise they are pretty basic modifications:

image 4
Click to enlarge

5. Next, Lets add the "thought" bubbles in with some text. Once again, this part depends on what your story is about and what you want your images to say. Go to shapes tool, and select custom shape tool, last one on the list, then go to the top menu and select the thought bubble shape. Here is how you do that:

image 5

image 6
Click to enlarge

6. Once again, like how you did your images and boxes from the previous steps, give these thought bubbles a stroke effect and a color-overlay of your choice. i did some white and some pale yellow. Also lets add text to the thought bubbles:

image 7

7. Ok, now to the other images, I am going to add some desciptive text inside of a pale yellow box. The box, once again give it a stroke using blending options. In the screen shot I have circled in red the areas that i am talking bout.

image 8
Click to enlarge

8. We are almost done. the areas That i have circled & numbered in Red is what needs to be done now.

  1. Add in a creative title
  2. Throw in a barcode and extra text, your choice, i just put the name of the school
  3. Add if you like the url of the site (or you can just leave this out. you can leave all of it out if you want!)
image 9
Click to enlarge

9. Okay, last step, i added some "books" into the background behind the actual comic just for kicks!

Comic Book Page
Click to enlarge


Author's URL: Concept Visionz
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments becky April 26, 2011 says:
Thanks for the tutorial - I love the word bubbles overlapping the panels - fun!
Reply
comments zammap January 06, 2011 says:
The boxes come out better if you set the stroke to "INSIDE" not outside/default. It makes perfect sharp edges instead of the ugly rounded ones you have.
Reply
comments nobody November 04, 2010 says:
nice tutorial i will try it thx =) -_-
Reply
comments Hypermode August 28, 2010 says:
agreed comic san is a killer. i have never onced used it ever. i've always hated it. i actually prefer to see arial and Time new roman. at least then i understand that they can't get some proffessional fonts but there not trying to get the worst font that's out there. if i see a comic with that font i normally don't read it because i have no respect for the comic and the author of that comic. next time you make a tutorial use a differnent font
Reply
comments xxlily June 25, 2010 says:
Your comic looks noob, no offence.
Just don't use Comic Sans MS.
Seriously, why do so many comic makers use it? It looks unprofessional and, well, noobish.
The tutorial itself is okay... but as your comic should be an example so people can see the potential of your tutorial, I must say that I wouldn't want to follow your tutorial after seeing the comic you made.
My two cents. ;)

Reply
Add comments to "Comic book page"

Captcha