SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials 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

   
subscribe to newsletter