Transcript week3
Week 3 Adobe Photoshop Introduction Create an Image Collage Save For Web Please Visit: http://www.jandcconsultants.com/school/ to download all the PowerPoint Slides for the different weeks Adobe Photoshop • Adobe Photoshop – – – – – Developed by: Adobe Systems Latest release: CS5 and CS5 Extended (12.0.1) / June 30, 2010 Operating Systems: Mac OS X, Microsoft Windows Developed by: Thomas Knoll, 1990 (Photoshop 1.0) Important Photoshop File Types: • .PSD (Photoshop Document) – format stores an image with support for most imaging options available in Photoshop. These include layers with masks, color spaces, ICC profiles, transparency, text, alpha channels and spot colors, Clipping paths, and duotone settings. It is essentially your work palette file. • .JPG (JPEG Image) – 10:1 Compression Ratio, the most common image format used by digital cameras and other photographic image capture devices; along with JPEG/JFIF, it is the most common format for storing and transmitting photographic images on the World Wide Web. JPEG does not preserve transparency. • .GIF (Graphics Interchange Format) – 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability. Supports Animations as well as transparency. Funny Animated GIF Example • .PNG (Portable Network Graphics) – Highest quality of image with best compression ratio. Built to replace .GIF. This is generally what I use every time when saving an Image for the Web. Photoshop Basic Tutorial 1. First let’s open up Adobe Photoshop CS3 and start a New File. 2. File -> New… or use Ctrl+N 3. Now you can specify the set-up attributes for your new image 4. Name the file “[your name]_test” (for example mine would be named: jared_test 5. Now specify the Width and Height, you can change the measurement to other types as well such as inches or centimeters. In this case, lets go ahead and make this image 1000 x 1000 pixels. 6. The only thing you may want to change is Background Contents. If you have an object that is not a full picture and you want to preserve transparency, then you may want to choose the contents as ‘Transparent.’ Otherwise, you can set as your current Background Color or plain White. Photoshop Basic Tutorial II Copy/Pasting Images To locate images to use for our demonstration, we will use Google Images Simple type in a topic, for instance 'sharks' and then click on the thumbnail you wish to view Once you click on the thumbnail you want, you will get a pop-up of that image (in Internet Explorer, you may need to click on the 'See Full Size Image' link at the top Now all you need to do is Right Click on the Image and goto 'Copy Image' or 'Copy' Go ahead and Paste this in your newly created PhotoShop file by going to Edit > Paste or CTRL+V Feel free to resize the image, by using the the Move Tool (first tool in the toolbar) and by making sure the 'Show Transform Controls' checkbox is selected Photoshop Basic Tutorial III Photoshop Important Items/Terms Layers – This is one of the fundamental elements of Photoshop, you can only work within 1 layer at a time. Each layer has an object embedded inside it (for example, the shark image). Move Tool – allows you to move an object, rotate an object, and also re-size an object (by enabling the 'Show Transform Controls') from the Move Tool menu. History – Photoshop has a great collection of user decisions, and you can view all of them in order and go back and forth between them. To view these, goto Window > History. You can also use Step Forward (SHIFT+CTRL+Z) and Step Backward (ALT+CTRL+Z) in this list. Modes – You can adjust the color schemes you may be working in by going to Image > Mode and changing the selection. Some people maybe more comfortable using CMYK then RGB, or going to Grayscale if need be. Marquee/Lasso Tools – These tools allow you to select an area, the lasso is freehand selection where the Marquee uses a rectangle or circle. Photoshop Collage • For the Next Exercise you are to combine your HTML and Photoshop skills! Your going to make a collage for any topic you want! • Create a .PSD document in Photoshop as Large as you like (probably around 1000 pixels (width) x 800 pixels (height)) • Name the file “[your name]_collage” (for example mine would be named: jared_collage • Once you have completed it, raise your hand and I will help you save it properly. Take your time to make an exciting image that showcases the best of your topic. Feel free to utilize all of the different Photoshop tools! Save For Web 1. Now we are finished editing our PSD file inside Adobe Photoshop CS3 we want to export it to our webpage • • • • File Save For Web… or use Alt+Shift+Ctrl+S Now you can export your image by choosing from one of the presets and then modifying it further, or just go with the default You notice that in the lower left corner, there is a indicator for the size of the image and how long it would take to download at 28.8 KBPS (dial-up modem speed) When are you ready to export hit Save and choose the folder and filename to save it to Replacing Web Page Images 1. Now we are going to Insert our created collage into “index.html”. To Insert our Collage into a Web Page, we need the following Code to do so: <img src=“jared_collage.png” alt=“My Collage”> *NOTE: You can replace the current image saved on your index.html file from lesson 2 2. Once you have saved your Collage on your Web Page, raise your hand. You should be able to view your site in either FireFox or Internet Explorer based upon your Default Browser Settings. Press F12 to Preview your page in your Web Browser and test your Image and Code.