June 13, 201016 yr Hi guys, im new to web design, but ive got the basics of HTML. There is one big thing i dont understand... This is a tutourial one of the forum members directed me too : Web design tutourial I have seen tutourials that do exactly the same thing and i dont understand it, if you scroll down ont he tutourial you will notice there is a section where it says "Get in touch" and below it are boxes in which people will be able to click in. But surely if your making it in Photoshop, then when you export it it will just be an image? SO you wont be able to click in it and write... So are all the tutourials wrong or is there a way of making interactive pictures in photoshop? Im sorry if that doesnt make sense, its kind of hard to explain... Thanks.
June 13, 201016 yr That's how to make a design, a design needs to be broken up and coded. Have a look here: http://dzineblog.com/2009/04/tutorials-psd-to-html.html
June 21, 201016 yr Basically, In photoshop you need to represent exactly how you want the website to look. There is a slicing tool in photoshop which allows you to create areas in the design to be withdrawn. You can even select every area in photoshop! and save for web. What i will say is this ia a very horrible way of making a website and can lead to disastrous speeds. What you need to do is first work out how to create the basic layout and colours using HTML and CSS. Find a valid HTML template you can use to start with and then add DIV elements to create boxes or areas which will be used to contain data or images. Secondly use CSS to style and alter the DIV elements to a particular size or colour. Once you have got the template as the general layout and it looks the same except without images and text, you then need to start bringing in the images and text. Meaning using photoshop slice the images and typing in the text in HTML. If you need more information on HTML and CSS, the best place for learning particular information is: HTML : http://www.w3schools.com/html/default.asp CSS : http://www.w3schools.com/css/default.asp Gary.
June 21, 201016 yr Check the tutorials out at this link: http://www.1stwebdesigner.com/resources/psd-htmlcss-conversion-tutorials/ Many of them first of all detail how to create the design in Photoshop, and then go on to explain how to turn that photoshop file into XHTML and CSS. It is very much a 2 stage job; Design via photoshop, function via XHTML/CSS. It is a bit daunting at first, but every aspiring website designer/developer has to start somewhere similar to this! Follow through 2 or 3 of these tutorials (pick the ones that look the coolest to you) and by the end of that, you'll be wondering what all the fuss was about. Trust me because about 2 months a go, I was in the same boat as you are now Kyle
June 29, 201016 yr Hi guys, im new to web design, but ive got the basics of HTML. There is one big thing i dont understand... This is a tutourial one of the forum members directed me too : Web design tutourial I have seen tutourials that do exactly the same thing and i dont understand it, if you scroll down ont he tutourial you will notice there is a section where it says "Get in touch" and below it are boxes in which people will be able to click in. But surely if your making it in Photoshop, then when you export it it will just be an image? SO you wont be able to click in it and write... So are all the tutourials wrong or is there a way of making interactive pictures in photoshop? Im sorry if that doesnt make sense, its kind of hard to explain... Thanks. Website design is done in parts, first, you make your design, what its going to look like, in photoshop, do all the designing and everything in there, Then once your happy with your design, you can start to code it all. So start making your html and css files. Photoshop is for your Designs. Hope this helps ^^
July 1, 201016 yr Okay, read this essay closely When making a website, you can use a piece of software like Ps to make the design. This is what your site will look like. It will have everything except for the text. Any text you do put in will be place holder text (Lipsum) to show where your filler text is going to be. You will include content such as: Buttons Nav Bars Headers Footers The header and footer will have their image set as the bg, whereas for buttons and navbars, its suggested that you make the nav bar in Ps, then slice it, to make the seperate parts of it. Then you insert the images into the code, and give them a link, alt text, and a border of 0. Then thats done, all as you need to do now is add content to your site. Shimples http://tinyurl.com/2ahelzq
July 2, 201016 yr You can use Adobe Fireworks to design/chop and create links all in one software. Although its much better to design first, then code from the ground up.
Create an account or sign in to comment