Are you a Photoshop CS4 user thinking about upgrading to Dreamweaver CS4 for web design? If so, you will find that the new Photoshop CS4 features for the web will make your web developing task faster and easier. The most important thing to consider is time when you are developing, editing or updating a website. Time is of the essence. Inserting or changing CSS code can take a lot of time; if you have done any web design you know this is especially true if the style sheet is very large.

Photoshop Dreamweaver CS4 has a new and improved interface. Most of the previous features are still there, but they have added a wide selection of predefined workspace options. The new interface gives you more flexibility and control. You can personalize your workspace. 

The new Related Files and Code Navigation feature allows easy access to both the CCS source code and the parent page. This is done by using the Related Files bar. When you click a file in the Related Files bar you will see the CSS code in the Code View and the parent page in the Design View. This feature makes editing or adding code extremely easy. In the Design View you highlight the desired item that you want to edit or change, and Dreamweaver CS4 will search and locate the associated CSS source code and highlight it. You will see the results in the Code View. This is a powerful feature because you can make changes and examine them in the Design View. Manually searching for CSS source code can be timely, but this new feature eliminates that process. 


The Code Hinting feature for Javascript frameworks and AJAX will give code hints to help web developers. This makes the process much quicker, and errors are dramatically decreased.

The new Live View feature is a web developers dream come true. Previously, after editing code developers needed to click a shortcut key to view their changes in a web browser. The design view in Dreamweaver looked different than it would when displayed in a web browser. Developers needed to toggle back and forth while editing code. Now, with Live View web developers can see the changes within the Dreamweaver CS4 application as they will appear in a web browser while they are working. The changes made to any code is simultaneously updated in the design and displayed.

The In Context Editing feature is useful for web developers who would like to allow end users edit ability on particular parts of a web page. It is a web based service that enables the end user to access the service and update or change web page content.

Three of the best new features in Photoshop CS4

Content-Aware Scaling allows you to resize or change the image format from horizontal to vertical without bending pixels and distorting your image. It only scales low detail information, and this is done by removing pixel “seams” of unimportant areas. 

New 3D feature adds three-dimensional capabilities. Users can create 3D objects from scratch, change a 2D image to 3D object, and paint on 3D objects using an advanced 3D work area that has a full set of 3D tools. 

Vibrance Feature is used for adding saturation to weak colors, but it does not over saturate colors that are strong. The new “protect skin tones” feature is fantastic, although the Vibrance is changed there is very little, if any, changes made to skin tones.

The Photoshop CS4 new features and the new Dreamweaver CS4 features gives users a powerful suite of tools that will increase productivity, and save time.

If you are designing your custom graphics for your social network with Photoshop, you have enviably run in to the "big mess" of layers and moving something in your header, then wishing you hadn't. 

Photoshop Play room

What if you could play around with different ideas for your layout without having to make a new file every time. What if all these versions could be saved in one file? Well you can do this with Layer Comps. Layer comps remember allot of the mundane things you do every day in photoshop. I remember back in the day saying to a client sitting at my desk, "do you like it this way?", then I went for 10min and turned off 20 layers, moved some stuff around, "Or this way?" Now with layer comps, I just move everything, and save it as a Comp.

Don't go hog wild

Comps are great for layouts, and also great for design but you need to use them differently for both.

They are also really great for slicing your site but back to the layouts and design. Comps do not remember everything. They remember mostly positioning and layer states, but this doesn't mean they are not good for comp'n design actions. Just do your designs as you would with separate documents - if you want to see the logo smaller and with shadows in one comp, and plain in the other, just make two logo states on different layers; turn them on and off and save as comps.

Slice and Dice the easy way

Where comps come in handy is slicing your design. Have you ever tried to slice up your design and had to move and change layers all through the process? Well here is a easier way.

1. Save a comp with the full image as it should be. Like here you see I have a comp named all:



2. Save a comp for each stage that you need to turn off layers or move something. Here I have logo. I want the background transparent for the logo because I'm making a PNG.




Of course you don't see my slices, I have set up slices already of all the elements. Continue doing this for every element that needs things moved, or layers adjusted.



You will then have a very organized process for  retooling your entire site and exporting it in min.

I love it when you find a little short-cut by accident that makes your life so much easier. I dragged a layer to the wrong button in the layer pallet in Photoshop CS3 and walla.. Now I've calculated that the time I will save making groups over my life time, will allow me to crochet

7 mittens, bake 13 soufflé or learn to spell "scit-so-phrin-eia".

Here is what you do. Shift or command select the layers you want in a group, then drag them to the "new Group" folder at the bottom of your layer pallet and you have grouped those layers. If you are in a earlier CS, I believe you can only command select, but the same should apply. 



 

 

If your like me you have a mound of tools in your garage but know where everyone is and the reason you bought each one. My wife asks why i need another hammer when i have four in the garage, well, of course, it's because one is a tacker, another a roofer, a decker and a nut scratcher. Duh! I'm the same way with CSS inspectors, I have a bunch and they all help me in different ways and in different circumstances, and, of course they are all firefox plugins.



Firebug
This is my big ass deck hammer... You probably have heard of this one or have it. In it's most basic use, it allows you to analyze visually the html next to the CSS. f I use this allot when I can't seem to find a sneaky attribute or tag in dreamweaver or cssEdit. for some reason I always find it with this little bug. It does allot more too, like inspecting DOM, which has helped me a ton lately on finding how a certain effect is constructed on a site. But, overwhelmingly I use it at the very end of designing my network. After I've carefully coded my page design in a css editor I plop it in socialgo and low and behold my footer is shooting off 20 miles to the west. This is usually because I deleted a CSS declaration instead of replacing it, and now the socialgo template is trumping my selector. So, I pull it up in firefox, find the offending selector and fix it right there, copy and paste it into my CSS. (IMPORTANT! Remove the code line data!!! or your $%^&) So it's more like a de-bugger for me.



Css Veiwer
This is my tack hammer I use all over the house and is always in close reach. It is a very simple plugin and does it's job beautifully. Just hover over an  element   and you get a very easy to read style guide to that element. Ya firebug does this too, but this is for quickies when I'm on a site and I just want to see quickly and clearly how someone accomplished an effect. You don't have to go back and for to the firebug window pain, it just pops up on screen and you are enlightened and face a deep moral de-lima whether you will just swipe it and run, or actually learn something and do it yourself and escape the fires of web developer hell where you are force to view all your creations on IE5 (mac) on a 600x401 screen (it's that one extra pixel that kills you) for eternity.



EditCSS
Just recently turned on to this one and man it's cool. It's my big fat monkey roof hammer (that I know all too well). I can just pound away and always seem to hit something I'm supposed to. Once I have been working on my style sheets for a couple of weeks I can read them like Joseph smith (mormon founder) throu a funky hat, one selector at a time. So when I know it this well it's easy to open up EditCSS and make a few big changes on the fly. firebug doesn't allow you to add selectors (if I'm wrong please help) though you can add declarations. You can addanything with EditCSS and watch it change on the fly. This would be great for those of you that want the live preview but don't want to drop the dough on CSSEdit, or that other PC version that just slipped my mind.    


Web Developer 
This one is my scratcher hammer. I used to use it much more than I do today. the CSS editor is a steaming pie and some other functions also are useless in my book. I actually
said I liked this plug-in on a podcast, I think I was mixed up. But I do scratch with it every once in awhile and where it gets the itch is downloading style sheets for my network, keeps the format most of the time when I just copy and paste and of course you can just use the url it gives you.

 
I have a few others but they are just nostalgia. Enjoy, and let me know which one is your favorite hammer.