Hey guys, For the first time I thought I would give designing a website in Photoshop a go just to see what it turned out like. Anyway I roughly followed a tutorial and have completed my design. Now however I want to transport it to Dreamweaver so I can add links, text and do a bit of coding and possibly further design. How would I go about this? I use Photoshop for a lot of my graphic design in my websites and usually just slice the image and paste it into Dreamweaver however I'm not sure that this would be the most effective or efficient way of making my website as it would be a lot of jpegs which would effectively slow down my website and I'm sure would load awkwardly. So does anyone know how I can transport my design from Photoshop to Dreamweaver or if they know of any helpful resource it would be much appreciated. Here is a link to the jpeg of my design if it makes it any easier to decide how I should best do this http://i86.photobucket.com/albums/k84/lufc6/Sprint-Magazine.jpg Thanks in advance
There is no way u can transfer it directly to css <div> The easy way to transfer image from photoshop to dreamweaver is using table.i usually use slice then save as web where the file saved as html and jpeg.
My first suggestion would be to find a CSS template that your design would work into. Try http://www.oswd.org or some other good free template source. That way you have a good framework to build on and don't have to worry about the CSS or HTML code. Just find one that has a left column, header and footer. Once you have one, it's just a matter of changing the CSS with your images from photoshop. You'll have one image for the header (which is a little large and will increase your page load time), a background image, the left sidebar background (use repeating CSS image), and a repeating image in the footer. I would recommend making the logo a little smaller and using a repeating image in the header, then just place the logo in as a gif or png with a transparent background. The code from Photoshop to HTML is horrid, as is any of the graphic programs (Fireworks included). They create too many nested tables, and your content boxes won't expand like they need to. You have a good start, just go find a free template that you can customize for the look you want.
Ayup. The slicing-tables-thing is old and slow. Avoid it. However, while I kinda agree with webrehash, without knowledge of HTML and CSS you'll have a heck of a time trying to shoehorn your design into someone's template. It's like someone giving you a bunch of tools and saying, Here, build a house. Huhwha? If you think you're going to do more than one site because it's fun or whatever, you should just go ahead and learn HTML and CSS. The HTML isn't really that hard, you can learn it quite fast (but learn about Doctypes!!! Your HTML changes with those), but CSS just takes a lot of time. This book gave me my start, and it's old enough to be sitting in the library: Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. After making a site (www.bubbleunder.com) with his book, you can go do your own thing and you'll at least know what you're doing. Once you have a basis, you can learn other things online like from htmldog.com etc.
Your best bet would be to learn (x)HTML and CSS like many other's have stated previously. Avoid using ImageReady to code the document for you (unless of course this is the only website your planning on making) because it gives you really bad, non-valid code and doesn't do CSS. As far as learning XHTML and CSS goes, you can read a book about it like many have stated if you can learn that way (I can't) or get a couple free templates and "gut" them to see how they work, and find as many different tutorials on XHTML and CSS and read though them (if your more of a hands-on person like myself) Also, after you learn the code (shouldn't take that long, they are both very easy languages to learn, and very main-steam now) you should read as many different "what to and not to do" articles as possible that are written by professional designers. Make sure you find articles that make sense, and tell you WHY to or not to do something. Example: Bad Article: Don't use embeded auto-play MP3 players on your sites you bafoon! Good Article: It's a good idea to avoid adding Auto-Playing music to your site that has no way of being turned off because you might like the song, but your site isn't about what you like, it's about what your visitors like. Also, you have to take into consideration that users don't like being surprised. Think about the guy that visits your site at 3AM with his wife/girlfriend sleeping 4ft behind him and his speakers cranked all the way up only to be blasted with some Heavy metal song that wakes everyone in the house up; I guarantee that he will not stick around the site to see what content you had to offer to him. While that was only an example of a good vs bad article, it should help you find a few meaningful articles that shed some light on the many mistakes that beginning web designers make, and help you avoid making them.
Thanks for all your responses, I am currently learning HTML and have just got the gist of it but thought I would try building a website in Photoshop as I seemed to find a lot of tutorials on them. Obviously this is not the way to go and I will try to stay clear. Will I still be able to do all the same designs with CSS as I can do in Photoshop?
I'd say, you can mostly do with CSS (and images) what you've got in Photoshop. However, there are a few things to remember. One, a .psd is only so-big. It has a set height and width. A website doesn't have to, and some people are going to be looking at it with really big and really small screens. It depends on the design, but sometimes you want a "liquid" site where there is no set width or height (height usually not set anyway, but...) Second, I also started out (with GIMP), and after making a design, I tried it out while first learning HTML and CSS. I ended up not having all the borders and other little things that were in my design -- I have borders, but not multiple ones. When you learn what you can and can't do, or what's easier or harder, or what's more code or bigger filesize for some little thing, you often tweak your design to accomodate. You may otherwise find yourself using a lot more images. There's a crusty old guy on this forum who suggests you shouldn't have more than 100KB worth of images (this is a rule of thumb, obviously a high-graphics site would have more). This can give you an idea if you're overdoing it with images. There are also a lot of little tricks you can do with CSS that are not immediately apparent. CSS-only rounded corners: http://battletech.hopto.org/html_tutorials/rounded_css_borders/ (only one site of like a gazillion and people use all sorts of things to hold the pixels) Image replacement (so there's still text when people turn the images off or people surfing blind): http://www.mezzoblue.com/tests/revised-image-replacement/ (scroll to the bottom, the last two are nice) Sliding doors, and tricks with it: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites Sliding doors is using two images to let something grow around text (like a button that you want to look fancy but dunno how long the text might be, you have an image for each side), or to take one single image and "slide" is around when the mouse hovers or clicks on something... cause a background image can be bigger than the space where it shows through. Original Sliding Doors: http://www.alistapart.com/articles/slidingdoors/ kinda old, but now a staple of the web. Pop-ups without Javascript: http://meyerweb.com/eric/css/edge/popups/demo.html and this fake image map: http://mikecherim.com/experiments/css_map_pop.php Check out the spiral and the menu on this page (without IE6, I don't think he hacked for IE6): http://meyerweb.com/eric/css/edge/complexspiral/demo.html Looks like transparency, huh? It's not! You should also get to know FLOATS really well, as well as IE6 BUGS cause IE6 is gonna stick around for a while and you'll soon find it your least favourite browser (followed by IE7 as I'm just learning all the havoc Haslayout with :hover can do!) Good luck.
1. Design your site with fireworks cs3 2. Download SmartCSS extension from adobe (http://download.macromedia.com/pub/developer/smartcss.mxp) SmartCSS article , usage example http://www.adobe.com/devnet/fireworks/articles/smart_css.html 3. Slice up your images, boxes, text areas etc. 4. Select export -> CSS Layers All done you got valid CSS template with your design.
Aaron111: You can download Adobe Fireworks CS3 free trial from Adobe and SmartCSS is freeware Roosta: This will give you a good export. A div based html file, css file and sliced images.
I could be surprised, sure, but I don't expect much from sliced site software. The site will almost always be larger (in total filesize) than one built semantically, and even if the CSS if valid, it's being built by robots. Robots can't (yet) be as smart and efficient as humans. But if you're only going to do one site, you may not want to wait 9 months or however long it takes to learn enough to build one site. And if you already have these various programs, you might as well use them. But I wouldn't.