Making websites from photoshop...

[pckrn1]

thought it was about time that i joined a graphics forum.....this one looks useful so i'll start here

so my first post......

is....



I've been getting more and more frustrated with dreamweaver. I can make nice looking pages in PS, take them into imageready and slice them etc., save as html, take them to dreamweaver.... and then it all goes wrong!!

I really can't figure it out cos it never seems to do what i want it to do.

All i want from it is to be able to add text, center my webpage, and make the background the same colour as my page so it looks neat....
IS THAT TOO MUCH TO ASK?!!!! /DesktopModules/dotNetBB/emoticons/sad.gif

just really cant get my head round any of it so if anyone knows of any quick tutorials to show me how to do these simple things then that would be awesome.
Otherwise, is there any software I can use that may be a bit simpler and better suited to the things im doing?


cheers for the help guys, if i get a useful answer i may decide to stick around!!! /DesktopModules/dotNetBB/emoticons/biggrin.gif /DesktopModules/dotNetBB/emoticons/biggrin.gif /DesktopModules/dotNetBB/emoticons/biggrin.gif

[kwl]

/DesktopModules/dotNetBB/emoticons/ohmy.gif I assume you have no knowledge in HTML or CSS, is that right?
That's one of the reasons I (myself) didn't go into web design yet.
What ImageReady does, it just slices the BIG layout image and put together some simple code.
However the code that ImageReady generates is just the code of sliced images, so therefore if you just click and start editing in the visual edit part of Dreamweaver, it will not work. What you actually have to do is go to the code edit tab and learn some CSS and HTML (or PHP if that's what you want as your page), then you start adding <div>'s and class'es (align, rollovers and such) /DesktopModules/dotNetBB/emoticons/sleepysmiley03.gif
It's something you have to learn, and I can tell you that you gotta really want it to learn it correctly.
I myself started in graphics 2 years ago and still didn't have enough time & motivation to learn it, even though I know the simple HTML and know how to use PhotoShop /DesktopModules/dotNetBB/emoticons/dry.gif

/DesktopModules/dotNetBB/emoticons/cheers.gif

[DesignVHL]

kwl is right, HTML is a must! I started in design about 10 years ago, and taught it myself. The way I use Photoshop for webdesign is similar. But after I have the design, I'll print it out, and draw out lines (for where it'll be in tables) - Still trying to get good positioning w/ the CSS - but it's still not there yet. CSS still doesn't take care of everything.

I never use IR to cut images up. I drag my own guides and cut the graphics out manually. I feel like you have more control that way. Then it's like putting a puzzle together. I use 1 px transparent gifs for spacers. This may be the old school way of doing things, but it works well. I definitelly suggest you get a good book on dreamweaver and run through the tutorials, it'll help a lot! As well as online web design tutorials. There are TONS of resources out there for you.

http://home.comcast.net/~color420/images/sig.jpg

Check out Particle (http://www.particlepeople.com)

Check out Particle with Mickey Hart (http://www.hydra-music.com)

[Jay McLaughlin]

I haven't used it yet, but there's a photoshop plug in called site grinder that's supposed to be able to generate a complete site from within photoshop.


Might be worth looking into

[GTMUK]

We tried making a website through Fireworks - encountered pretty much the same problems.....

<EMBED pluginspage=www.macromedia.com/shockwave/download/index.cgiP1_Prod_Version=Shockwaveflash src=undefined width=undefined height=undefined type=application/x-shockwave-flash quality="undefined" loop="undefined" bgcolor="undefined">

<img src="http://img.photobucket.com/albums/v245/gtm007uk/SpacedTim.jpg" alt="Image hosted by Photobucket.com">

[C.E.]

Any graphical program that you 'layout' a site in (Photoshop, Fireworks, PSP, etc), you will run into those same issues. My best suggestion is to learn some HTML. You don't need to know every single piece of compliant code, but you should grasp the basic knowledge of how things are built. That way, you can use your Photo programs to design your site, slice it up, and then when you reassemble it in DW or anywhere else for that matter, when you run into issues (and trust me, you will!), you can look at the code and troubleshoot.

Really get into the <TABLE> codes, because that is how these programs slice things and reassemble them. I know most folks will tell you to go the CSS route... but if you don't know HTML, you definately won't grasp CSS! However, if you know the basics of Table Rows and so forth, you might stand a chance figuring out where your images are and how to manually assemble them if need be.

[3howards]

i only use imageready for image compression and the rare animated gif ... if you're getting into web design, you need to know html. if you can learn css along with it even better. but html knowledge is a must.

Underclings (http://underclings.blogspot.com/)

[benjo]

I gotta say this and it’s gonna hurt but it’s the truth. Learn to use XHTML and CSS. I’ll tell you what CSS does. CSS is purely for design and XHTML is for content. CSS lets you position “exactly where you want it” lets you layer things similar to Photoshops layer pallet. XHTML is the HTML but the way you close some tags changes and a few rules but learning HTML is good enough cause they are almost identical.

Aside from that don’t even get stuck on using just Dreamweaver, as good of a program as it is you still need to understand the technology behind it to be an effective web designer. It’s the same thing as print design if you don’t understand the printing process, file formats etc. your not really a Graphic Design are you?

So to sum it up if you need to learn skip learning the old school way and go for the standard compliant way of life. Also use Firefox any respectable web designer know IE is a piece of trash.

Plus welcome to the GDF!!!

<img src= 'http://www.cbcamerica.com/images/webshots/benjobanner.jpg'>

[Broacher]

Someone mentioned Site Grinder. It is pretty cool. And it's code is supposedly pretty clean. They have another product called 'Photowebber' which does a lot of the same.

One of the distinct differences I see as a print only designer (well, I know enough on how to prep images properly for web, and a bit more perhaps) is that while a print designer need NOT to understand postscript code at all to do great work, you can't say the same for the web designer's relationship to the code in that media.

Of course, at one time, you really DID need to have some elementary understanding of postscript code, but then print doesn't have nearly the 'bandwidth' issue that web struggles with. Still, it makes me wonder if someday-- how soon, is anyone's guess-- we will have webpage/site compilers that really can optimize almost as well as an experienced web designer can produce.

The other aspect that I see coming out of the whole coding issue is where will the line be drawn? HTML and CSS is now the standard. But... what will be the next code that will be a 'must' to invest your graphic design learning time budget in? And does an emphasis on learning more code generally propel web design further towards the production service end or establish these skills more towards a strategic partner in communication design?

There's a transparency factor to technology. As it matures, the specialist skills once required to master the tehcnology and fully optimize becomes replaced by the evolution of the technology and thus obsolete. Good design, on the other hand-- isn't something that can be programmed into the machine (yet). Then there's the growing debate on data-driven design and CSS and... ??

It seems incredible to me today that I used to spend many hours per page achieving good transparency effects in a layout program because postscript doesn't natively support transparency. Well, now we have it in almost every graphic program you want and the whole process has been so well automated that for many newer designers, it's like they're not even aware that transparency was (and in reality, still IS) an issue in print design.

I'm off to find my waxer.

[mattborghi]

More and more I'm using Fireworks in conjunction with Dreamweaver, but with that said I also use quite a bit of Illustrator- exporting slices, and photoshop/imageready.

I started doing web design. Web design started to become very code oriented. Actually, it was after a lot of time trying to make actionscripts work that I said screw this I'm getting into print design. I had always loved printing, but couldn't get a job doing prepress. Eventually, I did. I loved all things about prepress, save two... High paid 'designers' who would send unlinked crap source files and then it would be my unglamorous job to get 'em through the rip, and 2.) it didn't pay as well as being a corporate designer or something. So after a while I got out of service. I was at my new job, a print graphic design job, not a week, before I was asked to help implement a web site. Of course I knew more than they did, but when i was doing it CSS wasn't supported by most browers, and image slices were deterred, hell... any images were deterred because most folks were using dial-ups. Anyway, the long and the short of it was I had to relearn the web.

I've always used Dreamweaver, but never had much use for Freehand, or Fireworks. However, the easy implementation of web graphics into Dreamweaver makes it an oft-used piece of software and a powerhouse combination. You have understand HTML, and knowing javascript helps, especially when creating rollovers in Fireworks, but you just need to know it so that you can recognize potential issues, not so you can hand code in word pad or simple text. I feel that coding is antithetical to designing. Some of my more tech savvy friends don't agree, but so it goes. Getting intimate with the code is necessary, because as cross-browswer issues become a problem when WYSIWYG isn't WYSIWYGing...You have to get into the code, know the browser hacks and all of that. HTML/XHTML, though is super simple compared to Actionscripts or javascripts. But like Broacher says above how long will it be before some other new web code is outmoding simple html. We're seeing that .asp, .php and various other server side scripting as well as Database driven sites.... which I can't even go into without getting a headache. Furthermore, and may more frightening is the separating of layout from content. This is a big trend with the web, and a small maybe not even catching on trend with newspaper layouts that where XML is used much the same way that MySQL databases are coded to work with PHP or some other data driven option.

Anyway, its after all of this talk about the web that I'm going to help Broacher find the waxer... simpler times...

:-)

matt
http://www.mattborghi.com
http://www.olagra.com
http://www.mweilinteriors.com
http://www.elizabetborghi.com

[Patrick Shannon]

I've absolutely never had a problem with Photoshop slices on websites at all. I simply make sure that all the slices line up in perfect rows or columns. If you divide all over the place, that's asking for disaster. Good planning is what it takes.

I guess it doesn't hurt that I go back over the generated code and clean it up a bit, so yeah...as others have said, HTML is essential, and you'll be better off if you learn CSS too.

Patrick Shannon

'Dear valued customer, go home and die. Signed, your friendly graphic artist.'

http://www.patrickshannon.com/mwwc_sm.gif
My War With Culture (http://www.mywarwithculture.com)
Political incorrectness reinvented.

[Ryan8720]

I usually do my designing in Photoshop, but I always do the sliceing by hand and then code the layout. You'll find that you can get rid of a bunch of extra bloat that way. Keeps in clean and lets it load faster.

http://www.edgewebdesign.org/images/misc/ryan_shadowmetal.gif (http://www.edgewebdesign.org)

http://www.spreadfirefox.com/community/images/affiliates/Buttons/80x15/white_1.gif (http://www.spreadfirefox.com/?q=affiliates&id=30444&t=82')

Free iPod (http://www.freeiPods.com/default.aspx?referer=9871683) (explanation in Mod Blog (http://www.graphicdesignforum.com/DesktopDefault.aspx?tabindex=13&tabid=151))

[TheBluePanda]

I use Photoshop to create the look of the website and Dreamweaver to lay it out. I don't let Imageready slice it up for me. I make the slices manually, because I want full control over the HTML. I don't like random spacer images being placed everywhere. I usually don't even use the slice function within Photoshop. I just use common sense to make the slices using the selection tool, and I save the selection if needed.

*shrug* It works for me! ^_^

[jamodu]

Does anyone use Illustrator for the initial design stage? Personally I use photoshop, but my creative director has just switched to doing it all in illustrator (much to the annoyance of the web design team who have to put it all together)

[Bear]

if i'm building a site in flash, then i'll use illustrator, because you can import bits from illustrator in vectors, but generally have to rebuild stuff.

Photoshop above all else gives you more control over type intended for screen and more precise preview/placing of images, so i prefer to use that for HTML etc. sites

hey jamodu, just noticed you're in huddersfield. who you working for ?

C*** Designer

[jamodu]

not attik /DesktopModules/dotNetBB/emoticons/turn.gif

I work for atom <www.atomuk.net>

How do you know huddersfield? Did you graduate from Creative Imaging?

[Bear]

it did cross my mind!

your companies site looks good, i like the sound of media and brand farmers.

A friend of mine studied up there, politics and history or some such nonsense, only visited a couple of times, but my families from up north anyway (durham)

C*** Designer

[jamodu]

cheers - its well overdue an overhall though! And yeah, the brand farmers seems to go down well with people - although we dont all wear wellies, or drive company tractors (as some clients seem to expect when they turn up for the first time)

There was a guy who was a couple of years below me at uni called Ollie - I thought it might have been you.

[SkeetShooter]

Here's what you can do until you learn html. Good Luck!


1. Create your layout.
2. 'Save optimized as' in your wwwroot folder (Windows IIS only)
3. open your 'untitled1.htm'
4. The main table should look like this...........

<!-- ImageReady Slices (Untitled-1) -->
<table id='Table_01' width='800' height='600' border='0' cellpadding='0' cellspacing='0' align='center'>

5. In DWMX, go to page properties and set your background color. Set your top margin to about 120px
6. Select the table that you designated in your slicing as the text area (or navi area)
7. Select align to top as your table attribute.
8. Don't overfill the table or the layout will explode.


That's a half-azz way of doing it, but it will get you the result you need quickly.

Anthony Epling
Skeetclub Studios

www.skeetclubstudios.com (http://www.skeetclubstudios.com)

[CHRISGEE]

Interesting conversation going on here. Please allow me to drop in my two cents. HEY BOB! :-)

Broacher said...
Of course, at one time, you really DID need to have some elementary understanding of postscript code, but then print doesn't have nearly the 'bandwidth' issue that web struggles with. Still, it makes me wonder if someday-- how soon, is anyone's guess-- we will have webpage/site compilers that really can optimize almost as well as an experienced web designer can produce.

Well I think this is very true in many respects. I remember the early days of the desktop publishing era as well and there are a lot of similarities in terms of how we had to be far more technological in order to do some things on the computer that probably could have been done far more quickly -- especially by someone more skilled -- on the board. Eventually, you're right, technology did catch up with what we were trying to do and you no longer needed to know how to code Postscript in order to create a simple page layout.

Designing for the web is going through a similar transition. The obvious difference is that during the desktop publishing industry, we had a clear and obvious understanding of what the end result would and should be. While create print with computers was new, creating the printed page was not new at all.

By contrast, trying to create for the web is like trying to hit a rapidly moving, shape-changing target. 10 years ago, web pages were basically static, print-like replicas of their offset predecessors. Today, web pages are increasingly dynamic and far more interactive. Clearly web pages are moving toward the goal that web content can be presented and delivered to an even wider array of devices.

6 years ago, I made the very difficult decision to give up print, where I started my career, and create for the web full time. I did so, even though print was my first love, because I was excited to be a part of shaping a new medium. The need for me to constantly learn new techniques, technologies, methods and sensibilities is clearly challenging but hardly unrewarding.

Broacher said...
The other aspect that I see coming out of the whole coding issue is where will the line be drawn? HTML and CSS is now the standard. But... what will be the next code that will be a 'must' to invest your graphic design learning time budget in? And does an emphasis on learning more code generally propel web design further towards the production service end or establish these skills more towards a strategic partner in communication design?

That's the question. And in some ways, half the fun. We don't know where the web is going. We don't know what future technologies will prevail and which ones will fall by the wayside.

And there will always be debates. I had poo-pooed CSS/XHTML for the longest time until I was met face to face with it's benefits. I had to do a project for a client which would be launched immediately in one language but would eventually be launched in up to 3 languages total.

In the past, in the web and in print, this would have meant taking the time and expense of re-laying out the same exact page for each instance of language. Who wants to go through that? I never relished those projects, whether in print or on the web!

Instead, we were able to use CSS/XHTML/PHP to create the site and corresponding cms so that the client can add 10 different languages if they like. All that needs to happen once the design is done is for the client to add the approved content.

Of course, I am NOBODY'S CSS/XHTML/PHP expert. I learned enough to know what the capabilities are and can do relatively simple projects. But for complex work, I employ consultants who follow my vision for the project. The same is true of PHP or ASP. I can do very simple things and have an understanding of what can and cannot be done but my wife, who is a programmer, handles that aspect of projects per my overall vision.

The relationship is not unlike the relationship I had during print. I certainly was not a printing expert but worked closely with my printers to make sure that my projects turned out the way I wanted them to. I would even run ideas by them ahead of time if I thought potential printing errors may arise later on. I was NEVER an expert at printing then, nor did I want to be. I'm NO expert programmer now, nor do I want to be.

But designers, regardless of our chosen medium, should resolve ourselves not to let technology stand in the way of our creating effective solutions. On a personal level, it's exciting, though. :-)

Good topic. Can't wait to see what others have to say.

[Vikia]

Welcome to the forum Chris!!!!! Love seeing you here! This is the BEST GD forum!

[CHRISGEE]

Vikia said...
Welcome to the forum Chris!!!!! Love seeing you here! This is the BEST GD forum!

Thanks Viki! :-)

Chris Gee
www.thepreparedmind.com (http://www.thepreparedmind.com)

[whatwhybecause]

in answer to the original question in this thread:

if you're wanting to use photoshop to create graphics and then import into dreamweaver, can't you just open graphic in fireworks and then export/import to dw? that way you don't have to worry about html if you don't know it as fireworks does all the 'leg work' as it were, for you?

just thought this could be a 'cheat option' for non-html users.

[PrintDriver]

Hm...
Original post was in March...
And the original poster was probably scared away by being told to learn code.
Knowing how to code is as necessary for a professional web designer as it for a professional print designer to know how to create a printable layout.

[tZ]

learn css

It took me around 3 days to grasp all the concepts.

Once you grasp the concepts if you know the design aspect your in business.

my bad... didn't realize this was from so looonnnnnngggg ago.