Photoshop Website Tutorial

This is a short and basic tutorial on how to create a Photoshop website...

Once you get better with Photoshop, eventually you will be able to create sites like my own www.bizlinked.com

1. To start, you should have Photoshop opened. Then make a new document about 600x700px in size. Now maximize the window, and ajust it to the size of your screen using the zoom tool.

2. For this tutorial, start off with a darker gray backround. Select the rounded rectangle from your tools bar. Make a white rectangle in the middle of your document spanning from the top to the bottom (Leave a little space on both ends).

3. Now that you created the basic layout of your site, you need to add a banner/header. To do this take the same rectangle tool, and make one at the top of your white rectangle. Make the color of this whatever color you want, besides white.

4. Below that, you are going to have to make another rectangle for the nav, the same way as before, only smaller in height and make it just below the header/banner. You may make this any color you want as well.

5. Below that, make one more rectangle, and span it from just below the nav, to the bottom of the white rectangle. This will be your content box.

This is a basic design tutorial, and I will continue it as soon as I get home today, on how to make it look nicer, and how to slice and code it.

Later...

 

Ok basic tutorial is fine, but your page really doesnt look good. In my opinion it is bad design. But that is just my opinion.

Boardingscene was not made in photoshop ?

 

... Not boardingscene was not made it photoshop besidesthe buttons, it was made in flash + css. As for the layout of the tempate not lookign good, thats up to your creativity, this is only a guide.

I am going to finish the tutorial up now...

 

6. Use your layers window, and right click the object you are looking for. Then select blending options, and play around with shadows and such untill you get the effect you were looking for. Apply this to all the layers that you want effects for.

7. If you want a more graphical or fancy look, you can possible try to use the photoshop brushes (I would download some, becasue the stock ones are quite plain). Then you can use the filter feature, by got in hte top menu bar and clicking filter and then artistic. Play around with it and see what you come up with.

8. To wrap up the design, add your text for your header/banner, and also your buttons using the text tool. Adjust it to your needs, and possibly apply some blending options to them as well.

***Slicing your finished product in Image Ready

1. Once your psd file is open in photoshop, click the button at the bottom of the toolbar to send the item to Image Ready. Adjust the window size using the zoom tool if needed.

2. Click the slice button on the toolbar. Start at the top left of your page then click + drag the tool to the right side above your banner. This is the basic way of slicing your images.

3. Next, slice out the sides of your image, starting from right under your first slice on the left side, and drag to it about 5 pixels in from the left side of the white box we made, and make its height just smaller than the bottom of the white box. Lastly slice out the nav bar, the main content area, and the bottom/footer.

4. Make sure everything is according to my instructions, then go to file and click save optimized. Once save, go to where you saved it and you should see a html file along with a image folder containing your files.

Congratulations! You just made your first photoshop site...

Later, leave me any questions you may have...

 

Well for starters the site wont always look great on the first try. One would have to play around on photoshop to tweak the page. Than put the page out in mainstream to get critiqued. Than come back and make corrections and tweak some more.

 

I agree... I just made this to help others get started, not to be used as an actual design. Thanks!

 

it's better if you could share some pictures of your steps. It's hard to follow without proper images.

 

Im sorry... I wrote the article on a school computer, and didnt have photoshop to take pictures.

 

cool. Good job.

 

Why bother writing a tutorial that explains or demonstrates nothing. There are plenty of tutorials out their that can explain what you have tried to do, with better wording and visual examples.

There is no point in writing just another tutorial for the junk pile unless you are going to improve upon or contribute something different.

 

nice share.Indeed i Find tutorial for make lauout website

 

yeah I have to agree. When you create a tutorial of photoshop you need to include images because it is a very visual program. Videos are best to learn photoshop because you can watch the steps involved in creating something. Youtube has a ton of tutorials on photoshop that are very good for this reason.

 

You guys can refer to this book on sale at Rockable Press - How to be a Rockstar WordPress Designer by Collis Ta'eed and Harley Alexander.

It's awesome!

Abhimanyu