Placeholder Text Have you ever typed a paragraph of text inside Photoshop and wondered why it looks smoother than the text displayed on an internet browser? Internet browsers do not antialias text but Photoshop has text antialiasing turned on by default.

To simulate how text will look like under an internet browser, select the font that'll be used and set the antialiasing to none . If we don't have any text ready, we can simply use Lorem Ipsum to generate random words.

ImageReady to Dreamweaver We can directly transfer a sliced template from ImageReady to Dreamweaver simply by going to File> Jump To> Dreamweaver . To add Dreamweaver to the list, create a shortcut (Windows users) or an alias (Mac users) to Dreamweaver inside the PhotoshopHelpersJump To HTML Editor folder (ex. C:Program FilesAdobeAdobe Photoshop CS2HelpersJump To HTML Editor) and restart ImageReady.

Measuring Lets say we have a section in our template and we need to add an image there that will fit 100% into the width. We can create an image and guess the image size until it fits but that's very time consuming. Instead, we can use Photoshop as a measurement tool:

1. Take a screenshot of the website by pressing the print screen button.
2. Inside Photoshop, create a new document (Ctrl+N). It should already have screenshot's width and height specified so we can skip everything and click OK.
3. Paste the screenshot into the document (Ctrl+V).
4. Select the Magic Wand tool (W) and uncheck anti-alias inside the tool settings.
5. Click on the area that you want to measure to create a selection. If the Magic Wand tool cannot create a proper selection because of a graphical background, use the Rectangluar Marquee tool to carefully select the top left pixel and the bottom right pixel of the area.
6. Crop the selection (Image> Crop). Windows users may simply press Alt+I, P to access the tool faster. Getting into this practice is a good habit and will speed things up.
7. Open the Image Size tool (Image> Image Size). Windows users may simply press Alt+I, I.
8. Inside the Image Size tool, it will display the width and height of the area.

Now we can use the Width and height information to create an image that fits perfectly into the section in our template. Don't forget to compensate for the cell spacing or padding if any. For example, if the table has a cell spacing of 5 and a cell padding of 3, we have to reduce the width and height by 16 (8 on each side) or else the image will stretch the table.

Selecting Color Many times we want to find out what color was used in an area of a template. Here's a quick way to grab the exact HTML color code using Photoshop:

1. Take a screenshot of the website by pressing the print screen button.
2. Inside Photoshop, create a new document (Ctrl+N). It should already have screenshot's width and height specified so we can skip everything and click OK.
3. Paste the screenshot into the document (Ctrl+V).
4. Use the Eye Dropper tool (I) and click on the color you would like to find the HTML color code for.
5. Click on the color pallet inside the toolbox.

Now we can copy and paste the code provided by the color tool window.

Previewing a Template in Different Colors Ever want to know if another color scheme would look nice? It's easy without having to change the color of every layer. Simply create a Hue/Saturation adjustment layer (Layer> New Adjustment Layer> Hue/Saturation) as the top layer and adjust the hue . Once you're done, create selections of areas that are miscolored such as photographs & logos, select the Hue/Saturation layer mask and press delete to mask out those areas.