How do you create a website using photoshop?

Question

I was asked by my dad to create a website for his business as a doctor. I am saving him $ because it is alot to pay someone to create it. I have used photoshop for 3 yrs and pretty much know how to use it. I am trying to create it now using iWeb but it seems that I cant create a good looking website (lack of features). So how do I create a website in photoshop?

Answer 1

Honestly, if you don't know how to do it you should tell your Dad now and find a professional to take care of it. It may seem to him and yourself like you are saving him money, but at some point in the future he will have to have the website created again by a professional anyways.

As a freelance web designer I've seen this happen far too many times. I have had many clients come to me saying that they had their son, brother, aunt, uncle, etc.. make their website and then their competition creates a site which blows theirs out of the water. Then they want to re-create their site and ask why a professional designer can't do the job for the same price as little Johnny down the street.

Basically, it's best to go ahead and spend the money now to have a quality site.

However, as for learning website development, there are tons of great tutorials on the Internet. Yahoo themselves have a few great resources at http://developer.yahoo.com/ . You can also learn the basics of web coding languages such as HTML at http://www.w3schools.com/ .

Good luck with your learning!

Answer 2

You can create a layout in photoshop.. then use the slice tool to break up images into a usable format. Then you can "Save For Web" and choose HTML and Images.

While that sounds easy, you'll have to dig into the HTML that it creates to add text to the pages. You can use something like Kompozer for that (HTML WYSIWYG editor).

Another simple way to get the job done quickly is using a site like www.oswd.org to find a layout that you like, and then modify the graphics using photoshop. Then you get the site layout you want completely designed, and change graphics to fit your needs.

Answer 3

my advice... use Photoshop together with Dreamweaver. Photoshop is mainly for image editing. u can use it to create beautiful layout/background for the website. but if u wanna make it lotsssss simpler to put in the text and link... u better use dreamweaver. it's a powerful software for creating website! there's a lot of tutorial too in internet. u can find tutorial in youtube too! or go to www.tutorialized.com

Answer 4

Well it's quite simple. Use as many layers as you can. Build your overall site design and look. Once you have that, look at the background of it, and if its a solid color, just turn that color into HTML or use it in CSS. Then divide up all of the other images by things like header, navigation, and save them as seperate images. Then put it all together. I would be glad to help your father for a very discounted price!

http://www.jacobkelleydesigns.com

Answer 5

Are you just designing it, or are you doing the whole thing? Because if you are, boy do you have  A LOT ahead of you. A medical business website? Do you have the knowledge of HTML, filing, and such? It's not just pretty pictures. If you don't know how to host, file, and code, I say, go get a professional.

Answer 6

  Open a new file in Photoshop by clicking on File/New and enter a width of 750pixels and height of 450px.

# Color the background with Black by choosing black in the foreground color and selecting the paint bucket tool and click on the canvas. Your background will now be black.

# Add a new layer by clicking on the Add Layer icon in the Layers panel. If your Layers panel is not open then go to Window/Layers. Name the new layer copyright . Select Rectangle Marquee Tool and drag to make the bottom banner with a width of 750pixels by 21 pixels. Color this banner with color #303030.

# Choose Horizontal Type Tool. A text layer is created automatically. Now enter the text for Copyright, e.g. "Copyright © 2005 www.YourWebBusiness.com. All Rights Reserved.

# Choose Horizontal Type Tool. A text layer appears automatically. Enter the button text on the top banner too: "home l sitemap l news l downloads".

# Add a new layer. Now make the gray horizontal line color #808080 with single Marquee tool.Go to Edit>Stroke. Choose Stroke width 1 pixel. Color #808080. Location Center. Click OK.

# Right click on the layer and select duplicate layer 3 times, because you have 4 lines. Put the lines in their corresponding place: in bottom, middle, top.

# Now you can enter the button text on the second top banner in a new layer e.g. About us l services l products l clientele l contact us.

# Now define the logo area with the rectangular marquee tool. Go to Edit>Stroke. Choose Stroke width 1 pixel. Color is #808080. Location Center. Fill inside with Black color with Paint tool. Name it Logo area.

# Choose the Horizontal Type Tool and write your company name or website name.

# Choose the Horizontal Type Tool and enter content in the middle.

# Insert your header (See our tutorial on creating an eye-catching header). This could also be any image you choose. The image needs to be a horizontal banner. Open your image file. Go to move tool. Drag from your image file to this layout in the middle of the layout.

# Draw the boxes seen on the right with the Polygonal Lasso Tool. Go to Edit>Stroke. Choose Stroke width 1 pixel. Color is #808080. Location Center.

Name your layer borderpics. Make two more Boxes. Adjust them equally in the right side of the layout. Insert the images by dragging them to your layout and naming the layers.

# Drag the layer borderpics on top of the 3 pic layers. The edges of the pictures have to be cut according to the design of the box.

# Now create the white bands with text at the bottom of each of the right graphics with the rectangle marquee tool. Fill the box with white color with Paint tool. Name it "whitebandpics". Choose the Horizontal Type Tool. A text layer is created automatically. Now enter the text for Gifts. Follow the same for the rest of the pictures. You can click here for the images - pic1, pic2, pic3. You can drag these images to your layout.  

Answer 7

I wouldn't only use Photoshop to build a website as there are many problems with doing that, i.e. no text, so search engines won't be able to index it. What you can do is use Photoshop to enhance a website by doing nice graphics and buttons, etc. I'd recommend creating a free professional website for your dad's clinic with Microsoft Office Live Small Business - http://starturl.com/officelive . It also has a free online web design tool that allows you to create web pages without coding. You can upload your own website as well. Currently, MS is offering a free domain name for the first year. It has 500mb of storage and no ads.  

Answer 8

you create the look and feel of the pages as a template in photoshop, then get down and dirty in xhtml and css and who knows all what else to implement it as a web site.

your dad is gonna get what he pays for - does he recommend the same approach to his patients?