Dreamweaver and Photoshop Integration
The two apps play very well together. Learn how to use this dynamic duo to create great-looking websites.
This video requires Adobe Flash Player.
Visitor Comments »
Comment by Ed | March 18, 2008 @ 11:20 pm
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…
Comment by Mick | March 19, 2008 @ 1:06 am
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 workContinue to share it should be the first “envie” of every artist
Comment by Jerome SERRA | March 19, 2008 @ 3:05 am
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
Comment by RC | March 19, 2008 @ 8:57 am
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.
![]()
Comment by mitzs | May 19, 2008 @ 12:30 am
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.
Comment by RC | May 19, 2008 @ 9:44 am
Great tutorial. The presentation is easy to follow. A definite bookmark for those who are learning to bridge these two products together.
Comment by Lisa | June 6, 2008 @ 5:01 pm
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.
Comment by Alicja | June 18, 2008 @ 11:57 am
Really great tutorial, thank you so much for posting it. It answered several of my questions!
Again, I’m most appreciative!
Comment by Monica | June 25, 2008 @ 11:26 pm
your voice is just so calm and cool. just thought you’d like to know that.
Comment by satch | July 15, 2008 @ 8:34 pm
Yes another great tutorial from RC you’re the best man
![]()
Comment by John | July 19, 2008 @ 1:44 pm
Do you show how to integrate lightroom airtight stuff and placeholders in dreamweaver?
Comment by Tim | August 25, 2008 @ 2:45 am
Love your style and explanations,very clear and simple.Thanks again,
Comment by sergio perinotti | August 26, 2008 @ 11:14 am
Hi, thanks for the great tut!
Question, can I also use this method to create newsletters??
Comment by david | September 21, 2008 @ 10:48 am
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!
Comment by Nohan Cafezeiro Ribeiro | October 18, 2008 @ 10:46 pm
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!
Comment by Kristyn | October 20, 2008 @ 6:58 pm
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…
Comment by D. Russo | October 23, 2008 @ 9:24 am
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?
Comment by C Stoddard | November 5, 2008 @ 11:00 pm
Do you have any tutorials on integrating InDesign with Dreamweaver? Can anyone point me towards something specific?
Comment by C Alderman | November 13, 2008 @ 4:43 pm
My opinion is that those tools are imprecindibles for a web designer.
thanks…
Comment by jhon | December 12, 2008 @ 8:29 am
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
Comment by Rob | December 29, 2008 @ 9:22 pm
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?
Comment by B. Lee | March 31, 2009 @ 3:34 pm
hi,
what is the name of RC’s website where I can see these stuff about Photoshop and dreamweaver integration.
Comment by AL | May 23, 2009 @ 7:43 pm
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.
Comment by Nate | August 2, 2009 @ 4:20 pm
Leave us a comment

- Dragging an Object Between Documents
- TV Scanline Effect
- Trick to the Glossy Effect
- 3D Text
- Changing Type on a Path





Photoshop
Illustrator
Indesign
Dreamweaver
Fireworks
Premiere
Flash
After Effects
Lightroom
Acrobat














