From the book
From the book
Preview images in a browser
A web browser displays all image files at 72 dpi. You can compare the logo assets you generated to see who they have been scaled.
- Open a web browser.
- Choose File > Open File, and then navigate to the Lesson13/13Working-assets folder.
- Double-click the logo_8.jpg file to open it.
- Open the logo.gif file.
- Return to Photoshop. Choose File > Generator > Image Asset.
- Save the file, and then close it.
)
The logo is three times its original size, but kept the same resolution.
It’s half the size it was in the Photoshop file.
)
You’ve successfully generated the images you need to build the website.
The assets you generated are unaffected, but Generator is disabled.
Extra credit
Copying layer properties for CSS
In Photoshop CC, you can generate CSS properties from shape and text layers without writing code. For shape layers, the Copy CSS feature captures size, location, fill color (including gradients), stroke color, and drop shadows created with layer styles. For text layers, it also captures font family, font size, font weight, line height, underline, strikethrough, superscript, subscript, and text alignment.
You’ll generate CSS properties from the Flyer.psd file and paste them into the site’s HTML file.
- In Photoshop, navigate to the Lesson13/Extra_Credit folder, and open the Flyer.psd file.
- Select the new_wing layer, and choose Layer > Copy CSS.
- Open Dreamweaver. Then navigate to the Lesson13/Extra_Credit folder, and open the New-Wing_Start.html file.
- Choose File > Save As, and save the file as New-Wing_Finished.html in the Lesson13/Extra_Credit folder.
- In Dreamweaver, choose View > Code to see the source code if it’s not already visible. Then select the entire comment between the <style> and </style> tags (“<! -- Paste your CSS code here -- >”), and choose Edit > Paste.
- Delete the lines that specify position, left, top, and height.
- In Photoshop, select the info layer, and choose Layer > Copy CSS.
- In Dreamweaver, click beneath the close brace (}) that follows the CSS code you pasted from the new_wing layer, and then choose Edit > Paste to add the CSS code from the info layer.
- Delete the lines that specify position, left, top, and height. Then, choose File > Save to save the changes to the HTML file.
- Click the Preview/Debug In Browser button, and then choose a browser.
- Preview the website. Notice that the text, font size, color, and even the drop shadow were copied from Photoshop.
)
Photoshop copies the CSS properties for the new_wing layer to the clipboard.
)
The CSS code Photoshop copied is pasted into your Dreamweaver file. Not all of the boilerplate code may be necessary for a website. In this case, you’ll delete some lines you don’t need.
)
)
It’s a good idea to preview a website in multiple browsers, as results may vary. You may want to edit the CSS code to specify type size and position, for example.