hello i have basic knowledge of HTML, Photoshop, and Adobe Illustrator.
I want to design websites, don’t have much a knowledge about that. As far as i know, we need to design websites in PSD,(photoshop) first, and then the coding is done. kindly let me know if i am right or wrong. also tell the whole process and do recommend me some books which can help me in designing websites in photoshop and let me know separate list of books for coding.
one more thing i would like to ask you all is that since websites are designed in photoshop, so i think their text will also be a image… then how will the users be able to use that text when site is functional, means how will the users be able to copy the text in case they need to?
i have many queries like that, someone who can help me out, please solve them, i shall be very thankful to you.
Before sitting down with Photoshop and working out what looks pretty, decide what is to go on the page. Pictures, text, articles and layout.
Pen and paper sketches of the layout AFTER you know what needs to go on the page, then move over to photoshop and make it look pretty if you have too.
I would recommend you look through the SitePoint bookshop: http://products.sitepoint.com/ and learn the basics of site construction.
Its easier than it looks and post questions if you need help!
i did not get the answer what exactly i was trying to ask, i wanted to ask you where to start, i know one need to plan thing on paper before going on photoshop, but what after that? the books here on sitepoint are not sufficient and are not what i am looking for, please suggest some more examples of good books.
A functional webpage is not typically an image and doesn’t require any images you cannot just create a layout in a graphics program and it magically become a webpage.
Regarding the main text that is plain text created with markup not an image. To position items on a page you use CSS again, that is not an image.
To begin with you should start with content and markup then apply CSS and perhaps add some decorative images later to enhance presentation.
You are probably thinking of Photoshop template slicing and converting similar to what is mentioned in the free SPF Book: Thinking Web: Voices of the Community - Chapter 05 - Successful PSD to HTML Freelancing.
I don’t know why you think that you need to design the site in Photoshop first.
If you are familiar with Photshop (as you are), it might be a good way of creating an initial design - something for you to show your colleagues and base a discussion on. But you would never use Photoshop (or any other image editor) to actually create the site. You already know the reason for that: Photoshop will store the pages as images not text. That’s not what you want.
Personally, I would start by doing a rough layout on paper (as SpikeZ suggested). Then focus on creating a style sheet to match the layout - you will need to learn CSS to do thta. After that, write some text in an HTML editor and apply the styles to it.
That will get you started. With luck, you’ll learn the rest as you go along.
Why do you say that? There are books that teach you all the principles of web design from the foundations upwards.
Photoshop is not a web design tool. Photoshop is for making pictures, and a website is not a picture. It is, at its simplest, text that is “marked up” with tags that tell a browser how to display it. So, normal text is wrapped in <p>Text here</p> tags to indicate that it should be displayed as a paragraph. Headings are marked up as <h1>Heading Text</h1> etc. so that the browser will display it as a heading.
Then, if you want to style your page nicely with colors, columns etc, you write some style rules with CSS, another kind of coding language. And if you want fancy things to happen on your page like popup boxes, you use a programming language like JavaScript to write instructions for the browser.
You may also want to have some images for your web page, and to prepare and optimize them for the web you can use a program like Photoshop. But otther than that, Photoshop has nothing to do with web design.
I think this is the best tip you can use. Photoshop is just for editing images. It can help you to come up with swanky graphics for websites, but you must be competent in coding HTML, CSS and Javascript for starters.
With these skills, then you can chop up your PSD files and hand code them to website templates. You mentioned your web design skills are elementary, well the best starting point for you would be http://www.w3schools.com/.
Its not a book, but you will find out how to work with HTML, CSS and Javascript in no time at all. From this, you can Google how to make web templates using Photoshop to complete the whole tutorial.
As i have gone through the post it’s usual that it’s good choice to use Photoshop or illustrator. But as much as text concern you should image for text if they are not used as logo and background. Books are not that much effective for me as i have read many but i like to learn through Video tutorial. Youtube is the best source for this or you can find out some tutorial on torrnetz by typing web designing tutorials.
First thing is you have to make the layout in photoshop. So learn photoshop. Look at other cool websites. Feel the design. You will learn in time.
Learn html5 and css3. Yes. Learn html5 and css3. It’s good for you future.
When you have learn everything above, you’re done
There are so many good ebooks on sitepoint.
No. As ralph.m has already explained, Photoshop is for making pictures and a web site is not a picture.
Whether it’s good for your future remains to be seen, but it’s not a good place to start right now. HTML5 and CSS3 are still in draft and the specifications could change several times before they’re finalised. They’re not fully supported by any modern browser, and not at all by older browsers. Stick with HTML4 or XHTML, which are established standards.
I have to agree with TechnoBear, HTML5 and CSS3 are works in progress. New browsers do support HTML5, but not all of its features. The same goes for CSS3. And in my opinion, if our friend, himanshu432, starts off with HTML4, the next standard of markup will not be that hard to work with. In fact chopping PSD files in HTML5 will be a piece of cake from what I figure. Most of the tags are easy to understand, and not much time will be spent.
Quick question, is Gimp comparable to Photoshop? Ability-wise, that is.
I’ve never used Photoshop, so I can’t answer that. You could try asking in the Graphics forum, but I suspect everyone will tell you that their favourite (whichever it might be) is the best, and you won’t be any further forward.
I use GIMP and it does everything I need it to - which doesn’t include web page layouts.
I have used Gimp to create several Wordpress templates and they are decent templates, from what I figure. Actually sold two of them last year. Its more of a hobby. But lately I was thinking of making some cash from it, that’s why I wanted to know the best software. From the Gimp page they claim it can do what Photoshop does, minus the price tag
IMHO the entire “draw some goof-assed picture in photoshop first” approach to web design is putting the cart before the horse, and the reason for the increase in the number of sites that are completely USELESS to me personally as a user. They fit entirely with the “accessibility, what’s that” attitude and result in broken inflexible layouts filled with little more than “but I can do it in photoshop” idiocy. It’s a paint program… leave it at that, because a LOT of what you can do in photoshop far exceeds the practical limit of what belongs on a website, often is impractical to implement as code, and on the whole pretends the page in question is a urinal at a train station.
I’m a firm believer in the content first approach since – and this was a bitter pill for me to swallow some eight or nine years ago – people visit websites for the content – NOT the goofy layout and pretty graphics you hang AROUND the content; in fact much of the pretty pictures people are slapping onto sites these days make them painful to watch load, get in the way of actually getting to anything meaningful, and turn the websites they’re slapped on into “bounce central”… which is to say most visitors are unlikely to let the page even finish loading, much less visit sub-pages. Ultimately such sites boil down to being “very pretty” – but who cares how pretty it is if nobody wants to use it!
Markup your content (or a reasonable facsimile) semantically, create the layouts (preferably fluid/semi-fluid with media targets) in CSS, THEN boot up the goofy paint program to make the graphics that will fit on it… and keep the graphics to a minimum since, well… look at the big successes of the internet… Google, Amazon, E-Bay, FaceBook, Wikipedia – these are NOT a graphical tour-de-force of websites and it’s why you only ever see the die-hard art f… art f… art folk websites on crappy little unimportant small business pages sold to suits who didn’t know any better, corporate websites where their Internet presence is effectively an afterthought, or oddball personal pages of artists sitting around stroking their… ego.
… and even when the big successes do bring in the artsy types to redo it, it turns into a usability nightmare – see Google over the past year with the idiotic dark grey on black menu (which with the rest of the page white is effectively illegible), switch to fixed metric sizes, and over the top javascript for nothing that’s slowly making even their core functionality of search less useful than it was a decade ago. You’d think they were forgetting what let them rise to the top of search in the first place.
That’s not true. Even people that are visual and would design before coding need to do something first: get the content and plan.
The system you follow to create a website depends on various factors and that includes how you are but also the type and size of the site and your goals and how many visitors you want that site to have.
Good planning, good organization of the content and a good marketing strategy will make the site rise and these points are decided even before thinking about designing.
A small fraction of that marketing strategy is SEO and because your content will be affect your marketing strategy, very often sites are coded before even they’re design.
Also, before you design (and while you’re at it) there’s another aspect to take into consideration: User Experience. And that includes usability of the site and accessibility
For all of these reasons, it is rare to see that a extremely successful site is first design and then coded.
I think I just did
SP books do cover almost all the basics but I made add books specifically planned for usability. “Don’t make me think” is a classic that is still valid even today.
The text may be an image in photoshop. You can use Photoshop to do your mockup but remember that a mockup is just a draft, nothing else. When you code your page, you don’t use Photohop, you use HTML, CSS, Javascript and, if it is a dynamic site, PHP or ASP or even Perl or Python, or a mix of all of them.
Hello, if you are not yet familiar to wordpress, maybe your should try it sometime. Wordpress is very reliable interms of designing a website and they also provide lots of features to make it easier for the user’s part.
None of the web designers I personally know off line even own a copy of PhotoShop.
They all write html and css, as that’s what web sites are built out of.
PhotoShop - the clue is in the name - Photoshop - it’s for editing photos and creating images.
Not websites.
(Actually I’ve come across a couple of web sites where some fool used photoshop to build a web site - each page was, quite literally, just an image. Linking to other pages was thus a bit of a problem, and the sites were linear (A>B>C>D>E) one route through.)
Note the post counts for those who say no photoshop is not for building web sites, and for those who say that’s where you start. Do you want to follow the advice of people with experience, or beginners?
It is handy for preparing images for the web, though, as most websites have images of some kind—best it for decoration, a logo, a favicon or whatever. What do you use to create/prepare images? I know there are free programs like Gimp.
Personally, I use Paint.Net. Both that and Photoshop are useful for working with the images that you want to show on your site, but that’s quite different from trying to design the actual site with those tools.
This thread is really getting into a developers vs designers discussion isn’t it?
No but, in all seriousness, to answer the initial question of the original poster - a website is not an image created in Photoshop (as others have said), all you need to create a website is a text editor like Notepad (yes notepad!) in which you write code in a language called HTML, the output can then be viewed in a webbrowser! You can style the html output using the mentioned CSS (Cascading style sheets).
Basics done, in terms of using Photoshop, often you will find that designers and graphic artists will create an entire layout or different parts of it, as layered images. These images are as you stated not functional. It is then the developers job to cut this layout into bits and pieces, and build and place them in a webpage using yet again HTML and CSS.
As for “How to start when creating a website???” - there is no correct answer to that question, since it depends on many factors and on your own preferences. However, I like to look at an entire development project a bit like building a house/building. First the architect will do some research and form a general idea, which he/she will then sketch and start planning the building process depending on exactly what the customer needs/wants and using experience to optimize everything. Then the architect might create a model of the final design (this would be your photoshop layout image) and then deliver the package (models, plans, sketches) to the builders and contractors who will then start building!
Sorry for the metaphors, just trying to help out - As for the books part, there are hundreds of good books on getting started with HTML and CSS (some here at sitepoint indeed) - some huge and very thorough, others thinner and more like quickguides - just do some research and get started!
- As for the books part, there are