Photoshop Tutorials – How to Create a Website With Adobe Photoshop

Home » Adobe Photoshop » Photoshop Tutorials – How to Create a Website With Adobe Photoshop

In this Photoshop tutorial, you will learn how to create a website with Adobe Photoshop.

Photoshop tutorials are very much in demand nowadays because every web designer wants to know how to create a website with Adobe Photoshop. In this Photoshop tutorial, I will teach you just that.

Note: If you are very new to Photoshop or web design you may have some trouble with this tutorial. Here is the end result: How to Create a Website With Adobe PhotoshopPin Start by making a new canvas around 950×950 pixels. Fill it with light gray. Select the top with the Rectangular marquee tool and fill it with a darker grey like so: How to Create a Website With Adobe Photoshop - 2Pin On the dark gray layer go to Layer- Layer Style- Gradient Overlay and use a gradient like this: How to Create a Website With Adobe Photoshop - Step 3Pin Now select the pencil tool and a 1px brush. Make a line above the light gray layer. To keep it straight you can hold shift. How to Create a Website With Adobe Photoshop - Step 4Pin Make a new Layer and select the Rectangular Marquee Tool and make a selection like below. Now select the Gradient Tool. If you can’t see it right click on the Paint Bucket Tool and it should appear. Select the 2nd gradient option and make sure that the foreground color is white. How to Create a Website With Adobe Photoshop - Step 5PinHit OK then drag your mouse down like below: How to Create a Website With Adobe Photoshop - Step 6Pin Here we have the result quite nice no? How to Create a Website With Adobe Photoshop - Step 7Pin I feel the white is a bit strong so i lowered the opacity a little bit. How to Create a Website With Adobe Photoshop - Step 8Pin Make a new layer and select the Pencil Tool again with a 1px brush. Draw a white line like below: How to Create a Website With Adobe Photoshop - Step 9Pin This gives it a cool kinda “engraved” effect. How to Create a Website With Adobe Photoshop - Step 10Pin Off to the navigation! Select the Rounded Marquee Tool with a radius of 5 and make a selection like below: Creating a Website Using Adobe Photoshop - Step 11Pin Fill it with white and it should look something like this: Creating a Website Using Adobe Photoshop - Step 12Pin Cut of the lower part of the button with the Rectangular Marquee Tool. Make the color of the button just a bit darker so it doesn’t stand out too much. Creating a Website Using Adobe Photoshop - Step 13Pin Go to Select- Load Selection then go to Select-Modify-Contract and select 2px. Then Select the Gradient Tool again and now make sure the foreground color is black. Drag down just like before. Creating a Website Using Adobe Photoshop - Step 14Pin Should look something like this? Getting better right? Lower the opacity of the gradient layer to suit your taste. Creating a Website Using Adobe Photoshop - Step 15Pin Now make a new group called button. Creating a Website Using Adobe Photoshop - Step 16Pin Click on the layers while having ctrl pressed down. Now click and drag them into the button folder. Creating a Website Using Adobe Photoshop - Step 17Pin Now go to Layer- Duplicate group and move all the buttons around the way you like. I decided I am going to modify one of the buttons and make it a rollover button. Click the button group you want to edit and select the FIRST layer in that group. Go to Layer-Layer Style-Color Overlay and pick an orange color. Creating a Website Using Adobe Photoshop - Step 18Pin Slap some text in those babies and no way…it’s starting to look like a navigation! Select a dark gray color for the text. Creating a Website Using Adobe Photoshop - Step 19PinIt should look something like this now… Creating a Website Using Adobe Photoshop - Step 20Pin Make a new layer and using the Rectangular Marque Tool make a black shape like below. Making a Website with Photoshop - Step 21Pin Select the FIRST layer in the rollover button group and go to Select- Load Selection. Using the Gradient Tool set on white to transparent make a gradient. Set the layer Blending Mode to overlay to give it a more orange-ish color. I’ve also just putt in some text. Making a Website with Photoshop - Step 22Pin Select the text layer and go to Select- Load selection and move the selection up by about 1-2 pixels. Making a Website with Photoshop - Step 23Pin Select the Gradient Tool and on a new layer drag up. Set the layer to overlay. Here’s the result: Making a Website with Photoshop - Step 24Pin I have duplicated the gradient layer to give it a stronger transition from yellow to orange. Making a Website with Photoshop - Step 25Pin Select the text layer again and go to Select- Load Selection and move it up by 1-2 pixels. Now select the Gradient Tool, but we won’t use from white to transparent now we will use black to transparent. Making a Website with Photoshop - Step 26Pin Drag it up on a new layer and it should look like something below: Making a Website with Photoshop - Step 27Pin Select the Rectangular Marquee Tool and erase the webdesign black gradient part, since we only want the black gradient layer to be on the “dev” text. Making a Website with Photoshop - Step 28Pin Looks quite good, no? Making a Website with Photoshop - Step 29Pin Now just slap in the url font tahoma size 11 and no AA. Making a Website with Photoshop - Step 30Pin Make a selection with the Polygonal Lasso Tool like so: How to create a website - Step 31Pin Select the brush tool around 70px it has to be a soft brush! and brush the inside of the selection How to create a website - Step 32Pin Erase any unnecessary bits and it should look like this: How to create a website - Step 33Pin Duplicate the layer and move it around a bit… How to create a website - Step 34Pin Duplicate it again and move it around… How to create a website - Step 35Pin Erase any bits that stick over the navigation or over the banner part… How to create a website - Step 36Pin Move the 3 brushed layers below the text layer so it doesn’t cover the text. How to create a website - Step 37Pin Select the Rounded Marquee Tool with a radius around 3-5px, make a selection and fill it with a dark gray color. How to create a website - Step 38Pin With the Polygonal Lasso Tool make an arrow shape so the whole part looks like a bubble. How to create a website - Step 39Pin Go to Layer-Layer Style-Stroke and stroke it with a 1px light gray color How to create a website - Step 40Pin Just some text again, went with a bit more playful font Pin Going to start the work on the content now. Select the Rounded Marquee Tool with the same radius as before and make a light gray box. Pin Make an arrow like shape again with the Polygonal Lasso Tool. Pin Go to Layer-Layer Style-Stroke and use the settings below: Pin Duplicate the box layer and move it up and fill it with a dark gray color. Should look something like this: Pin Go to Select-Load Selection and move the selection down by 1px. Pin Select the Gradient Tool and make sure you’re foreground color is white then drag it down just like before. Pin Should look something like this…it’s slowly getting there, huh? Pin I move the gradient layer by 1pixel to the right. Pin Now cut it in the middle of so using the Rectangular Marquee Tool Pin Duplicate it and go to Layer-Transform-Flip Horizontal. Pin Now cut the “highlighted” part of the gradient using the Rectangular Marquee Tool and now the gradient should be symmetrical.Pin Move the gradient layer and the dark gray layer below so the top of the light gray layer box sticks out on the top by about 2px. Also, move these layers above the light gray box. Pin Now using the Rectangular Marquee Tool cut the remaining dark gray layer. Pin Now select the light gray box and go to Layer-Layer Style-Outer glow and use these settings Pin Slap some text in it Pin Make a new layer and use the 1px brush with the Pencil Tool and make a line like below Pin Decrease the opacity of the layer to whatever you think looks good Pin Some more content text nothing special… Pin Now move the whole box area above close to the banner.
Pin Duplicate the whole box area. I suggest you putt these layers in a Group and then duplicate the group( Layer- Duplicate Group) and move the layers down Pin Now on the second layer hide the outer glow effect and the stroke effect on the light gray layer by clicking the eye in the layers box
Pin Duplicate that layer and move it down to make the whole box bigger. Pin Now merge the 2 layers and turn on the outer glow and stroke effect. VOILA our box is bigger Pin Some more text to not make it so empty. Pin Make a new layer on the right side with the Rectangular Marquee Tool and fill it with dark gray. Pin Go to File-New and make a new canvas 30×30 pixels. We’re going to make a sweet pattern. Make a shape like below with the Polygonal Lasso Tool. Then go to Edit- Define Pattern Pin Now back to out design psd. Make a selection with the Rectangular Marquee Tool and go to Edit-Fill and select Pattern. Find out pattern that we made and hit OK. Decided to remove the brush detail we made in the banner, because it just wasn’t working…. Pin Decided a Light gray color would fit nicer. Pin Repeat the same step on the right side of the navigation Pin Back to our content boxes…. Select the Brush Tool and use a soft brush around 100 pixels with black color. Brush the right side of the bar then cut off the unnecessary parts with the Rectangular Marquee Tool. Pin Go to Layer-Transform-Flip horizontal. Make sure this new layer is below the text layer so it doesn’t cover it up.Set it to overlay and play with the opacity. Then move it down to the second box so they are identical. Pin Went for a bit of personal detail with the lamp in the webdesigndev text…made the icon myself a while ago. These kinds of things make your design special. Pin I’ve darkened the whole background to make the content boxes pop. Pin Select the light gray layer of the content box and select the Gradient Tool from white to transparent. drag it up from the arrow towards the text. Pin Should look just slightly modified. Pin I’ve duplicated the white gradient we did a couple of times to make the effect stronger. Now make a selection with the Rectangular Marquee Tool like shown below and with the Gradient Tool drag it from your mouse down to the text. Pin Your box should look like this Pin Duplicate all these effects and apply them to the second box Pin Decided to stick a picture in the second box to make the design a bit less dull Pin Now we start working on the right column…using the Rounded Marquee Tool make a shape like below Pin Decrease the opacity to suit your needs. Pin Make another shape using the Rounded Marquee Tool and go to Layer-Layer Style-Gradient Overlay and use these settings Pin Now go to Stroke and use these settings: PinDuplicate the first bar layer and move it 1px up.Go to the first BAR layer and go to Select-Load Selection then select the duplicated layer and hit delete. Pin Now move the duplicated layer down a bit and go to Layer-Layer Style-Color overlay to make it a light gray color. This makes the box pop out. Pin Make another shape with the Rounded Marquee Tool this will be for our text in the right column. Pin Fill it with a darker gray color so it looks kind of engraved Pin Duplicate the layer and move it 1px down. Now go to the original layer and go to Layer-Layer Style-Color Overlay and use a light gray color so a tiny gray stroke should appear only at the bottom of the box. Pin Decrease the opacity a bit so it doesn’t stand out too much. Pin Slap some text in the box… Pin Duplicate the whole box and move it down. Pin Decided to give it a bit more and made a dotted line on the side of the column. This isn’t hard to do just takes a lot of time. Pin Go to the first banner layer and go to Layer- Layer Style-Gradient Overlay and use these settings: Pin Wow its starting to look like a good design now! Pin Starting in the footer area. Made a selection with the Rounded Marquee Tool and filled it with our pattern. Then go to Edit-Transform-Flip vertical. Pin A light gray color to match the banner pattern color. Pin Now just below the pattern layer make a new layer and fill it with the same color the main content is filled with. Pin Starting to putt some text in it. Copyright is very important because you never know when your work might get stolen. Pin Some personal touches to the content area. Using the Rounded Marquee Tool. Nothing we didn’t learn by now. Pin Filled it with some actual content about webdesigndev and Michael Dunlop. Pin And here it is. If you managed to finish this tutorial I’m sure you can become a great web designer. Remember, every Photoshop tool even the most basic ones can be great when used right. Pin

43 thoughts on “Photoshop Tutorials – How to Create a Website With Adobe Photoshop”

  1. this tutorial is completely confusing. At the end after completion of all design work what should be done to make it as web page ? how to save it in what form?

    Reply
  2. The tutorial was really great. A lot of details that’s why i love it. The only think i disliked was that the page was really too big and need to scroll all the time. You could tabbed it or even separate it into parts. In any case thank you for this tutorials

    Reply
  3. It was very dificult to me but I learned too much with your lessons. Congratulations! Sorry for my porr english.

    Reply
  4. it’s very useful for college students because every one know about the web design and how to create a design ideas to learn something…………….thank u machi .

    Reply
  5. @ marsha

    You need to learn how to slice the template up. You only need about 10% maybe a little more to create the template for the web. Once you have done that you need to code it all together. Thats the tricky part. Making all the HTML and CSS for the template. Then you have to do that for more than 1 page. If your going to have 6 pages then you’ll need to create different layouts for each page. Around the content. I hand code all my websites and only use XHTML 1.0 Strict coding and ALL my websites validate in W3C Validation.

    First learn how to code using HTML and CSS then once you have mastered that the rest comes more easy. After you have learnt HTML and CSS then move on to PHP and JS, Anyway hope this bit of info helps anyone who is wondering what to do.

    Reply
  6. lol okay, then you have an image of your website.
    this tutorial is totally unreadable (add some empty lines, or just begin a new line after the picture!) and doesnt help me much. thumbs down!

    Reply
  7. hello
    thanks for sharing ur ideas
    but i am a beginner and not getting all the points clear anyone here who would help me to make it clear……
    i am trying but sticking at some points please help me out of this…

    Reply
  8. It’s nice to see this type of easy to do and appealing design too. nice work! A followup of this tutorial would be great. “How to put this design online.” Something most of us non web designers will appreciate.

    Reply
  9. It was very detailed, and very well explained but doesn’t actually further explain how to turn it into an actual webpage. You can’t put the text on it via photoshop because if you do they are uneditable as far as I am aware there is no way to change it in future without redoing that part of the graphic which isn’t worth the hassle. Something on how to turn it into a website is really needed.

    Reply
  10. sir you have done very good job,and you have made wonderful web design but you didn’t tell how to give the link.can i give link these forum button without any changes in dreamweaver?
    if can do these
    plz………….!

    Reply
  11. Again, another “web design with photoshop” that doesn’t show us how to get it as a website. The only thing we get here is a picture. As marsha said, how to get it on the web ? You already have tutorials like this one on the website and none tell us how.

    Reply
  12. This tutorial is great and all. However, the easy part is designing it in Photoshop. What about Part 2….. how to get it on the web. That’s what I get stuck on all the time!!! Please!!! Thanks!!

    Reply

Leave a Comment

Share to...