The two apps play very well together. Learn how to use this dynamic duo to create great-looking websites.
Author: RC Concepcion
Rafael Concepcion (RC) is an education and curriculum developer for the National Association of Photoshop Professionals, and the co-host of Layers TV - The How To Podcast For Everything Adobe. An Adobe Certified Instructor in Photoshop, Illustrator, and Lightroom, RC has over 10 years in the I.T. and ecommerce industries and spends his days developing content for all applications in the Adobe Creative Suite. RC has held training seminars in the U.S., Europe, and Latin America, and recently combined his photographic and web experience to teach with famed wildlife photographer Moose Peterson at the "You Can Do It Too" workshops in Mammoth, CA and at the Voices That Matter Web Conference in San Francisco, CA. RC also writes columns for Layers and Photoshop User magazines.
I am always amazed at the true capabilities of the 2 programs. Thank you for the great tutorials, even I can follow along.
I may have to stop the video a few dozen times, but it is fantastic.
I hope nobody else finds this that is new to the web. Everything about it is the wrong way of creating a site. Tables destroy sites on mobile devices, everything is unselectable text, and your page is too wide for 800×600 screen resolutions. Come on man…
Thanks a lot awesome and so simple for you.
I’m 40 and I’m goin’ back to”my studies” cause i discovered that graphic design was my real goal. After 15 years (i had an apple and NeXT center) I’m jumpin triyng to fly over the wave of actual graphic design like my mentor “N Brody” did and did so well.
I like very much this magazine and i have the idea to translate it in french with some Adobe’s addicted.
Hope i’tll work
Continue to share it should be the first “envie” of every artist
Aw, Mick.. you found me out! You bring up a great point on screen sizes, and something everyone should pay attention to.
The settings that I have on the demo do not conform to 800×600, but they weren’t supposed to. Designing for 800×600 (IMO) is something that i find myself doing less and less these days. Most places that Im looking at sites for have statistics that show under 10% of users using 800×600 resolutions – thank goodness.
If you were designing a site for mobile device, you should -definitely- look into using a CSS based layout for laying out a site. This shows you how DW and PS can work together.. not a full workflow for all scenarios. KT has classes that show both methods (CSS and Tables), so its up to the designer to figure out how to deploy the site. I personally think tables get a bad rap – sometimes, you just have to get out something fast.
As soon as I figure out how to make Trajan a default font so I dont have to use it as a graphic, that’s the next tutorial
Till then, making it a graphic for slicing and rollover is our only option here. The center copy of the site is thrown out, replaced by an ER in DW.
We’re just showing how the programs interact.. not necessarily a full workflow.
Hope it clears it up!
RC
Do people really make sites up in PS and then sling it into DW? Why not just do it all in DW? What would be the purpose of doing it in PS? This seems like it would be slower and less productive. Yes I know, my newbie side is showing.
Youre right.. if you were just doing text based stuff, it would be easier to just use Dreamweaver. However, if you wanted to use specific fonts and graphics on the page (Backgrounds, borders, specific buttons you’ve bade), you couldnt design them in Dreamweaver. You’d have to go back to Photoshop and then bring them in there.
Great tutorial. The presentation is easy to follow. A definite bookmark for those who are learning to bridge these two products together.
I am trying to find more info about RC’s DVD with Dreamweaver and Photoshop integration, and as a matter of fact, I would love to scan through all the tiles that are available – where can I find them?
Great tutorial, and since I am guru in print and baby in web – posibility of using Photoshop to create pages gives me a hope that I will get into web.
Thank you so much for great, great tutorial.
Really great tutorial, thank you so much for posting it. It answered several of my questions!
Again, I’m most appreciative!
your voice is just so calm and cool. just thought you’d like to know that.
Yes another great tutorial from RC you’re the best man
Do you show how to integrate lightroom airtight stuff and placeholders in dreamweaver?
Love your style and explanations,very clear and simple.Thanks again,
Hi, thanks for the great tut!
Question, can I also use this method to create newsletters??
Parabéns, muito legal, uma dica muito importante, para otimizar o trabalho de criação de layouts, principalmente quando o cliente quer ver a página on-line em (html), com os links já funcionando, esta técnica vai me ajudar muito, neste sentido, obrigado!
This was sooo helpful! RC I’ve been racking my brain though, if I want to keep the background image and put text over it, shouldn’t I be able to “nest” a table of text on top of my image? I’m getting gaps for lack of a better term and it’s breaking the main image up… I know it’s going to be something really easy, or is this part of another tutorial all together? Any help is appreciated! Thanks in advance!
This is without a doubt the answer to my prayers. I’ve been working in PS for over 7 years and then got into DW (2004) but felt that I could do a lot more creatively in PS. NOw I can create in PS and wah la – I can put it in DW – slicing – and make a website. Awesome. Thank you! You’re a good teacher…
I was wondering if anyone knows how to change you table boarder colors in cs4? I notice that RC has a black background and is still able to see his table boarders at a zero board. Can anyone help me on this?
Do you have any tutorials on integrating InDesign with Dreamweaver? Can anyone point me towards something specific?
My opinion is that those tools are imprecindibles for a web designer.
thanks…
Mick, Yes, it’s true that tables are outdated, and I’m sure the author of this video knows that. Tables are a great starting point for a beginning web designer–I know that I started to build sites with tables when I first began. BUT….as time grew, I began using CSS layouts. So, I still think this video is useful in my opinion. Whether you’re using tables or CSS, slicing up layouts in Photoshop is very important!
-Rob
I noticed that when you sliced the buttons it didn’t slice all the way down the page. When I make slices I end up with a million boxes because I cannot isolate just the area I am slicing. How did you do that?
hi,
what is the name of RC’s website where I can see these stuff about Photoshop and dreamweaver integration.
To keep the page from whacking out when you delete the middle section, before you take out any of the graphics go into the code and take the height out of the code.
What a fantastic video, simple direct useful information with out getting bogged down in symantecs. Thank you I have learner something I can use. Well done. Oh Im only starting out building and havent a clue about css and all the happiness that it brings but with helpful videos like this and some time I look forward to the adventure.
this is horrible, all newbies, dont do this… its not valide..
Great job RC. I am a newbie to this web design thing because I just completed my bachelors in Visual Communications (Web Design), but be advised that a couple of our cool instructors showed us this method to demonstrate how the two programs worked together. I’ve been doing it this way just to practice making websites. Good tutorial. I love the way you explain stuff is a simple matter that doesn’t make the user/listener feel stupid. You are the Man. Keep up the good work. I’ve follow you guys through Layer Magazine all the time. You guys rock!!! Keep up the good work. I want to be like you when i grow up.