i am to create a web page interface using photoshop..help?

Question

what are the main very basic rules to start creating a web page interface design on photoshop?; my target screen size i am told is : 800 x 600 pixels :S (remember to allow for browser :S), and what it is exatly about the webpage interface that i have to create on photoshop, apart from the backround; if all the images i can create on ilutrator?

Answer 1

Ok basic size rules...when creating your website you should really be considering people with the lowest common resolution, ie 800 x 600 as you say. But this is becoming increasing less common nowadays as most "entry level" users have resolutions of 1024 x 768 instead. But it depends at who your target market is. If the target is corporate or a large body of any kind (local government etc), you should stick to 800 x 600 as the IT departments tend to be slower at updating the inhouse computers.

As a general rule though, design within the following parameters (it takes into account the average loss of room due to things like the outer borders of the browser and the windows task bar etc):

800x600 = 760 width x 420 height

1024x 768 = 955 width x 600 height

Also bear in mind that these are the sizes within the browser when it is *maximised* and a lot of people do not browse the web with their browser maximised. Personally I always stick to 760x420 just for this very reason. You should be aiming to get AT LEAST the navigation and important first paragraph of text within this area (ie so users don't have to scroll too much).

Next, I can see no reason why you would want to use photoshop if you are comfortable with illustrator...unless you are planning on providing someone else (such as a developer or client) with a basic photoshop layout. If this is the case, layout the way the screen will look in photoshop after creating the main graphics in illustrator...but provide the developer with the illustrator files too so they have a "higher quality source". Otherwise, just stick to what you know best.

Don't forget to keep your website navigation CLEAR and SIMPLE...make it text only (ie no link images) if possible, which will allow for blind users to navigate the site using disability browsers.

There are hundreds of other "accessibility guidelines" which you can find at:

http://www.w3.org/

but if this is a hobby then it is unlikely you'll be bothered about these things...and if its a layout for a developer, let him worry about it!! (thats what designers do right?!)

Apart from the above, all you need to consider is ease of use - minimise your navigation, make it easy to find and use, be simple whenever possible, consider if your grandparents could get there way around it as a guideline to how straightforward it is.

Good luck with it.

Answer 2

expert Designers use photoshop to enhance their pics. expert builders use a straightforward textual content cloth editor (Notepad++) to code the workings of the web pages. some, on requests from customers, introduce some aspects of Flash, yet purely the solid ones furnish decision contents (for those customers who do no longer desire Flash (for many solid motives). No expert will enhance a "Flash purely" internet site: it particularly is a non-starter and a commercial suicide (yet solid sufficient for a blog that purely some customers bypass to...) On browsers, experts use, a minimum of: IE, Firefox, Opera, Chrome and Safari to objective their web pages, and from 800 to 1660 determination. Edit: in case you're an artist, you are able to study to layout pages in some weeks, yet to alter right into a expert developer will take years of gaining understanding of. regrettably, new-to-information superhighway "designers" utilising Dreamweaver for a week think of they are homestead and dry. no longer something is farther from the actuality. The interactive information superhighway is an quite complicated field!

Answer 3

I would suggest you not to use Photoshop but Macromedia fireworks. With photoshop you can retouch images but it's not great to use for a web page interface.
Fireworks instead let's you import your illustrator images and it's far more versatile.

You should read some FAQ on how to use it:

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13187

Answer 4

Hi there,
A good and easy to use html editor is Kompozer. Recommended for beginners. Grab it here http://bitly.com/1sW5hYj
Very useful program!
Have a nice day