How to create website in Photoshop

Hi,

There was a post about this here

http://www.warriorforum.com/website-...tutorials.html

Hope that helps,
~Albert

It took me forever to understand how to use Photoshop to make websites. Here is the process that I learned...

1- Learn HTML. You need to understand the basics of HTML before you start applying styles to it (CSS).
2- Learn CSS. CSS is what gives your text different fonts, sizes, colors as well as the background, headers, footers, etc

For starters learn how to code what is called a "box model". This is a basic code structure for a simple webpage which should include a header, navigation, body and footer.

3- Learn how to use Photoshop if you don't already know how. If you know how CSS properly works, then you will know what to do with your Photoshopped webdesign when its completed.

Hello, the best thing you can do to find out more infomation on this subject is have a look on Youtube. you could search for "slices photoshop" as the slices tool is the main tool for saving images into web pages.


Hope this is helpful


Thank you
Keith

I am very experienced in Photoshop and have never built a website in it. I do however use it extensively for images, designs, logos, slices and much more.It is a great tool for that. However as others have suggested, learning html and css is a great foundation on which to start. From there you can use Dreamweaver, another Adobe product to actually build your sites.You can even load a Wordpress, Joomla or Drupal cms into Dreamweaver which will help you with the dynamic parts such as javascript, php and sql. If you really want to learn to build websites from the ground up it is a fairly steep learning curve. You might want to try Wordpress by itself to start. There are a gajillion good web tutorials on this. If you want to build dynamic (interactive) websites start with Joomla. It's a little more complex but a great platform.

bob

It is not a good idea to create websites in ps. You must design websites with ps. You can watch visual lessons about interface design, html / css and how PSD exporting to html...

What version of Photoshop are you using? I come from the land of hand coding and mocking up websites with paper and pencil but have recently been switching over to visual designing layouts using fireworks and photoshop using the new CL-CS6 versions of Adobe's software.

There are quite a lot of videos on how to do mockups in photoshop and illustrator on Adobe's website and also on youtube. If you want to spend a little money you can pay for a month at lynda.com or some other video training site that goes into FULL details on how to use Photoshop. Spend one month going through the video's at lynda.com and you will be more of an expert than most designers.

Anything is possible in photoshop. I would say watch some good tutorials regarding web designing on youtube. There are some great ones.

Take a screenshot of the site you want to make, Crop the container/wrapper save it as an image to your desktop. Open the image using PhotoShop use the slice tool to split it up be careful to size your autoresponder to fit the slice you are going to delete to accomodate the auto responder in your finished site. Save the sliced up image for web and devices within photo shop so you are saving html and images, Open your sliced up file in Dreamweaver and the file will appear on the left of your browser page. Create a css rule for the body set your colour for the background of the body and set the alignment at center. Click on the sliced up page and it will give you a value such as table01 or something like that, make a css rule for the table go to the box section, uncheck the box that makes all the values the same for the margin and set the margin at auto for right and left. Insert your auto responder code into the space you have measured and delete the slice that makes way for it, that's it you can do it with any page you want. You can change the graphics or text on any slice you want while in photoshop.
It's really easy but after reading what I've wrote I realize it sounds really complicated. Anyway hope this helps

I'm surprised a lot of people recommend learning the development stage before designing. I start from the designing stage and still learning the development stage this very moment. I only know the simple stuff or enough to code in MY work and not from another theme or somewhat. The thing is, improving on graphical design takes practice and practice of your creativity! You don't want to be like most of the designers on this forum, plain and boring.

Many people try to build website in Ps. But It will increase the load time as complete website will be in images.

I sort of laugh with each new version of photoshop.
First it was vector graphics... which illustrator is better for
then animation ... which flash is better for
now it's making websites... which dreamweaver is better for


I don't get it???
If you want to create a website without learning code, just use dreamweaver, yes it is a little clutzy but not nearly and awkward as photoshop

Creating the design using Adobe Photoshop, which means creating an image of the main page and a model page that will repeat on all the other pages and then generating (also with Adobe Photoshop) HTML format pages with images.

When I was tried to learn more about this topic, then I found this link.
I think you should check the link to learn more about creating website in photoshop.

Create a Clean Modern Website Design in Photoshop

The best way to achieve this from a design and coding point of view would be to build each item seperately in photoshop, so make the logo, header area, nav buttons and all other items on the page as separate photoshop files then create a photoshop file for your web page, open your files and drag all the images onto the new file. After that its just a matter of determining which items you will use as images and which you will code. Beauty of this method is that all of your images are all ready to go directly onto the server and the other parts of the page that need coded, like the text in the main content area, you have already determined the font and the color so very easy for a programmer to code the page if you include on the page the size and the font you have used for the text

Photoshop itself you can create good website, if you are familiar with that.

I use photoshop to version made ​​easy ???

Start off with a premade .PSD maybe, modify it according to what you like, and then go from PSD to HTML. That's a good coding practice!

You can design a site using photoshop easily. First of all you have to make the design you want in the conventional way in photoshop then cut the whole thing into pieces and make them work as a web page.

You want to avoid simply slicing your psd into images- stuff like borders, drop shadows and even gradients can be coded in css now, most modern browsers support the css rules. This will keep your page loads down.

Also stuff like repeating patterns you should create by creating the smallest possible image, then repeating it using css.

For icons and other decorative items, check out css sprites. This is where you put all your icons in one image, then use css positioning to show the correct portion of the image in the right place, this drastically reduces http requests and keeps your page speed up.

Also, check out the 960 grid, it is a way of dividing up the page into different columns with aesthetically pleasing proportions based on the golden mean - using a layout based on these proportions ensures a tight design, most professional sites you see adhere to these sort of design rules. Google 960 grid, you will find some psd files with 960 grid guides, some css frameworks with the skeleton already set up for you, and even firefox browser plugins that overlays the grid in a web-browser, so when you are coding your css you can check that the spacings are correct.

When coding your html and css, avoid dreamweaver and such, they just add bloat to your code. Use an editor such as komodo edit, or netbeans, which are free, and have syntax highlighting and tooltips with reminders.

Finally, check out the firebug plugin for firefox, it lets you inspect the css and html of any web page, great for debugging your site, and seeing how other sites acheived a particular effect.

Good luck!

waw...nice discussion ini here..

thank you all