Category Archives: Photoshop

Week 11 | Monday | Final PS Class

LEAVE A COMMENT

  • Link to your PROJECT PAGE

HOMEWORK

Major PS Project I | ITEMS DUE THURSDAY

  • RESEARCH – 3 MORE tags on Delicious with comments for each piece of research
  • INSPIRATION – Pinterest board titled: PS Banners – Pin 5 MORE images with comments for each inspiration
  • PHOTOSHOP Iteration showing AT ALL SIX COMPLETED banner AND one banner should be animated
  • WORD DOCUMENT 400 words
  • DROPBOX All PSD files on Dropbox
  • CRITIQUE 200 word critique response from today’s critique

 

Week 10 | Thursday | PS

LEAVE A COMMENT

  • Link to your HOMEWORK PAGE
  • Link to your PROJECT PAGE

HOMEWORK

Major PS Project I | ITEMS DUE MONDAY

  • RESEARCH – 3 tags on Delicious with comments for each piece of research
  • INSPIRATION – new Pinterest board titled: PS Banners – Pin 5 images with comments for each inspiration
  • PHOTOSHOP Iteration showing AT ALL SIX COMPLETED banner

 

Week 10 | Monday | Major PS Project I

Mini PS Project I DUE

Provide a link to your project page and DropBox


The 10 laws of Photoshop etiquette

01. Name your layers

Photoshop etiquette
The first rule of Photoshop club: name your layers

As boring and mundane as it sounds: name your layers. This is the most basic rule of them all – even if it’s a basic descriptive name such as ‘arrow’. There’s nothing worse then trying to find a certain layer within a file containing countless duplicates of ‘Layer Copy’.

Once labelled, organise these layers into group folders; allowing you to move and show/hide various large sections with ease. Layers such as backgrounds or other solid elements that you wish to be preserved should be locked to ensure they don’t get clipped or moved accidently.

Once you’ve completed your task it’s always worth having a quick glance over your file to filter out and delete any unnecessary empty layers (a good way to check if a layer is empty is pressing Command+T). You’d be surprised how many crop up.

02. Structure your files logically

Establish a simple naming convention that not only works for you, but would also work if your granny had to read it. Naming conventions such as ‘New’, ‘Latest’ or ‘’Website-Final’ won’t cut it and I can almost guarantee that it won’t be the ‘final’. An example of a good naming structure could be: ‘Name_Type_Size_Version’.

Why this structure? The company name is the first thing you see to identify the brand of the file. ‘Type’ illustrates what the file is intended for (Website, Email, etc). ‘Size’ is only applicable in certain cases such as banners, whereby you will have various sizes for example: ‘120×600’ or ‘300×250’, and finally ‘Version’, which could be simplied to ‘v2’, ‘v3’, etc, can be applied when making revisions to the original file. It’s good practice to save progress as another file, so you never overwrite previous revisions in case you need to refer back to them.

Seeing these variables in the file name is a smarter way to organize your files and will definitely eliminate any confusion for future reference.

03. Mask once

This refers back to point 02 and grouping layers: why apply 10 masks on 10 layers when you can group the lot and mask once? Work smarter, not harder!

04. Save your paths

The pen tool to a designer is like the lightsaber to a Jedi. The better you can use it, the more powerful your skills become. So once you’re done spending hours making the perfect clipping path be sure to save them all, otherwise you risk doing it again later in the job.

05. Don’t stretch text or images

Photoshop etiquette
Keep a sense of proportion – avoid the temptation to stretch

Never stretch buttons or vector shapes out of proportion; especially ones with rounded corners. Always redraw them to ensure you get the correct and consistent shape and style.

Never stretch images either; scale (down, never up) and transform but don’t stretch out of proportion. The same applies for fonts; kern, track and scale but whatever you do, absolutely do not stretch. Never. It’s very unprofessional.

Using smart filters where possible will ensure vector shapes can be made bigger and smaller with no distortions; handy to bear in mind when designing for mobile and retina displays.

06. Align your elements

A sign of a good designer is alignment. So switch on those rulers and get snapping: Snap to grid. Snap to Pixel. Snap to Layer. Snap to something! This ensures both that your designs are pixel perfect and that all elements within your design are easy on the eye.

07. Apply effects gracefully

Avoid the temptation to apply Color Overlay, Drop Shadow, Bevel, Outer Glow and Strokes onto each and every element of your design. It’s a tool job – know the difference between each one and when to use it. The main objective should be to use effects that complement the design and elevate your user experience. Subtlety is the key.

If you’re applying the same effect on numerous elements then its always worth copy/pasting the layer styles to ensure the effects are exactly the same. Also, be aware of the Global Lighting option and when this needs to be applied. When in doubt, turn it off, so you can customize each element and effect to your liking. Otherwise one day you’ll be wondering who changed all the styles in your design.

08. Collect up unused styles and images

Photoshop etiquette
Unused styles and images may come in handy later – so keep them organised

After experimenting with various styles or images, it’s good practice to put all these unused elements into one folder titled something like ‘Unused’. Have it switched off at the bottom of the original file (it can be deleted on copied revisions thereafter to keep file-size down).

This rule is an exception to the general rule about removing unused layers. It follows the same logic as keeping various little elements such as icons and small imagery handy just in case you need to make quick changes or additions.

09. Proof-read your designs

Most designers are bad at spelling, so check your text and grammar thoroughly. Ensure everything is spellchecked (and that includes the brief and copy provided) so you iron out any further kinks and your work can clearly be read and understood.

Try not to use text speak. Make it clear so your granny could read and understand it.

10. Make everything easy to find

Once you’re all done with your design, be sure to store it in a relevant location with all stock imagery, web files, and so on nearby – not in a random folder called ‘design files’ or ‘misc’. You’ll probably never find it again, and others certainly won’t.

Conclusion

All these Photoshop etiquette rules may seem like a pain, especially when you’re used to working in your own way. But if you get into the habit of sticking to them, they’ll save you a great deal more pain in the long run. Every little helps. And this acts as a good first step.

TUTORIAL #1 | DO NOW

UPDATED STEP BY STEP | HOW TO ANIMATE A BANNER AD

01. Setting up

Make a banner - step 1

Firstly we need to set up our document to the right spec. Navigate to photoshop, create a new document and int he new document dialog box ensure the dimensions are set to pixels and enter 728 for the width and 90 for the height end ensure that the color mode is set to RGB. As we’re working in pixels, don’t worry about the resolution. This is the standard size for a horizontal leader board banner ad.

02. Start designing

Make a banner - step 2

Now to start designing the ad. This is going to be a typography led design so I want to keep it bold and graphic using Creative Bloqs brand colors, but feel free to use your own colors and graphic elements to best suit your project.

First create a new layer in the layers panel and make a perfect square selection by holding shift whilst using the rectangular marquee tool. Now fill this with a color using the paint bucket tool and name the layer something suitable, in this case I’ve called it “color block 01”.

03. Fill the banner

Make a banner - step 3

Now hover over the square with the move tool and whilst holding alt, drag and duplicate the square so that it snaps to the edges of the original square. Snap will need to be turned on under the view menu.

Keep duplicating the squares until you’ve filled the banner, then select them all by holding shift and ensure that they’re centred in the document. Now simply delete every other orange square to create a simple square grid to base our design and animation on. With all the squares still selected hit Cmd+E to merge all the square layers.

04. Create type elements

Make a banner - step 4

Now to start creating the type elements. Hit T to bring up the type tool and draw a square over the first orange square. Make sure white is selected in the foreground color, type a character and select the font you’d like to use, the bolder and more graphic the better. Use the keyboard shortcut Cmd+Shift+. to quickly increase the point size.

Once you’re happy hit the move tool and then use the cursor keys to centrally position the type within the orange frame. Duplicate the text frame and repeat the process filling all the orange squares with different characters.

05. Duplicate and merge

Make a banner - step 5

Now duplicate one of the text frames and repeat the process in step 4 filling the white squares with orange type as shown above. Now we want to create a single layer out of the orange type and the white type.

To do this simply hold shift and select all the white type and then hit Cmd+E to merge the layers. Repeat this process for the orange type and name them something appropriate such as “white type 01” in the layers panel. This will rasterise the type and you won’t be able to edit it anyone so make sure you’re happy with it.

06. Create frames

Make a banner - step 6

Repeat this process until you have three sets of white type and three sets of orange type. Now we need to create two frames for the advert copy. Simply create a new layer, fill it with a color and then type your message, in this case ‘The 100 best free fonts’. Merge the color layer and type layer and then repeat the process for the final branding frame, in this case I’m simply using the Creative Bloq logo.

07. Animate the layers

Make a banner - step 7

Now that we have all the layers named up and neatly organised, its time to start animating them. If you’re using CS6 or above then navigate to Window>Timeline and then choose ‘Create Frame Animation’ from the drop down. If you’re pre CS6 then simply choose Animation from the Window menu.

Now turn all your layers off apart from the background, the colored blocks and the first set of orange and white type. Duplicate the frame and turn off the first set of orange and white type and turn on the second set. Repeat this process for the final set of type and create separate frames for the copy and logo layers as shown above.

08. Play with frame rate

Make a banner - step 8

You’ll notice that all the frames in the timeline are set to 0 sec and if you press play then they’ll cycle through at super fast speed. Now what we need to do is start playing around with the rate at which the animation cycles through each frame, bearing in mind that we’ll probably want to linger longer on the actual advertising message and branding.

This stage is very much a matter of trial and error but be careful to ensure that the final message(s) are left static long enough for the viewer to engage with the message. for the purposes of this job I’ve chosen a 0.75 second frame rate to cycle through the graphic letterforms and then 2 seconds per frame for the final messages.

09. Check the animation

Make a banner - step 9

To check your animation simply hit the play button in the timeline panel and ensure that ‘Forever’ is selected from the drop down if you want the animation to loop continually.

You may wish to experiment with some of the type cycling through at different frame rates or creating more sets of type so there are a greater number of character to cycle through. However, always keep in mind that the more complex the animation then the greater the file size will be. Check with your client what the maximum files size is as this can greatly affect the complexity and options you have when creating your animated banner.

10. Save as…

Make a banner - step 10

Finally, we need to save out the animation as a GIF. navigate to ‘Save for Web and Devices’ under the file menu and ensure that GIF is selected. Here you have a number of options but the main ones that will affect the file size are the number of colors you choose to use and the Lossy slide bar.

Play around with these settings and you’ll see an estimated file size beneath the image preview window. Bear in mind that there will be a loss of quality if you drastically reduce those two options but the flatter the colors then the better the results. For example, photographic work will noticeably suffer.

Now all that’s left to do is save out the file and drag it into your browser to test it.

HOMEWORK

Major PS Project I | ITEMS DUE THURSDAY

  • Create a new PAGE on your website called PS Major Project and place each item below on the project page
  • RESEARCH – 3 tags on Delicious with comments for each piece of research
  • INSPIRATION – new Pinterest board titled: PS Banners – Pin 5 images with comments for each inspiration
  • CONCEPT – List the nonprofit you will be designing the banners for and the “concept” behind each banner. Minimum of ONE paragraph
  • LOW FIDELITY – B/W  Sketches of each banner – total 6 banners
  • HIGH FIDELITY – Color Sketches of each banner – total 6 banners
  • PHOTOSHOP Iteration showing each banner size – simple page with just boxes/rectangles and the size of each banner listed
  • PHOTOSHOP Iteration showing AT LEAST ONE COMPLETED banner

 

Week 9 | Thursday | PS Project II

Banner Design for the Web

Advertising is everywhere, and with Google ad words, Facebook ads, and sponsored Twitter tweets, advertising on the Web is the future. Many site generate 100% of their revenues directly from banner ads.

Examples

50 Incredibly Creative Online Banner Ads

How to design banner ads that people actually want to click

Behance Network
The  Behance Network website design has small sponsor boxes down the right-hand column that display ads next to their content.

  • Know what you want to say.
  • Create a call to action, something to make the viewer want to click on your ad for more information.
  • Design for horizontal or vertical .

Here are some useful design tips:

  1. When you design your ad, keep it simple and clear, free of clutter with a message that’s easy to read. It must jump out from the rest of the message.
  2. Use animation, but sparingly. You don’t want to irritate the viewer.
  3. The animation should not interfere with the design or message.
  4. The animation should loop no more than ten times.
  5. Keep file sizes small. It’s important that your animations load quickly. While Flash creates great animations, it can also create large files. For this reason it’s better to use compressed JPEGs or GIF files.
  6. When designing a banner, it’s important to understand the importance of branding, so make sure you use the company logo in some way.
  7. Make sure your message and call to action is on the first page in case the user decides to stop the animation.
  8. Use bright blue, green and yellow colors. Avoid red.
  9. Some words that can improve your click through ratio (CTR) are: Click here, submit and free.
  10. Make sure the banner links to the page that has the information mentioned on the banner. Don’t make them hunt for it.

DESIGN RESOURCES
Standard Web Banners
Banner Ads: Excellent Examples for Inspiration


EFFECTIVE BANNER DESIGN 4

#4 TUTORIAL | DO NOW


EFFECTIVE BANNER DESIGN 5
#5 TUTORIAL | DO NOW


EFFECTIVE BANNER DESIGN 6
#6 TUTORIAL | DO NOW


EFFECTIVE BANNER DESIGN 7
#7 TUTORIAL | DO NOW


PS MAJOR PROJECT I

Photoshop Major Project I:
Web Banners
 
Photoshop Major Project is due at the BEGINNING OF CLASS on week  11 Thursday – November 19th.

Client:

YOU CAN CHOOSE TO USE

Save the Children OR CHOOSE ANY OTHER NONPROFIT OF YOUR CHOICE.

**Choose a charity that has a 4 star rating on Charity Navigator

CLIENT BRIEF:

Create 6 website banners to support the Internet marketing efforts of theSave the Children  which highlight the REFUGEE CRISIS.Save the Children has a recognized brand with specific font, color and sizes. View more.  

Snapshot of the Crisis

12.2 million   People in Need of Humanitarian Assistance in Syria
5.6 million   Children Affected by the Crisis in Syria
7.6 million   Internally Displaced Persons in Syria
4 million   Syrians Displaced to Neighboring Countries

Data Source: UN OCHA

You have free reign to design the composition as you would like. Focus on online donation,  a second idea here,  text treatments, co-brand one of your banners with MSU, or any other Save the Children banner ad that specifically focuses the REFUGEE CRISIS.


Save the Children Brand Guide

Review their brand guide carefully to give the web banner the correct voice, imagery and look and feel. VIEW THEIR BRAND GUIDELINES HERE.

The above image links are meant as a reference and NOT for you to directly copy. You can get more inspiration here.  For this project, you will need SIX completed composition images of your designs (6 different designs) that includes SAVE THE CHILDREN’S logo and follows their design brand which will be used in a series of web banners. You will also need to create a Word document that explains your concept rationale. The Word document may also have some sort of image/images integrated into it. 

  1. Develop a concept for this project.
  2. Submit JPG images sand .PSD files for each of the SIX web banners, as well as your Word doc. Your Word doc should be at least 400 words (roughly one page) in length. Include your concept statement with your rationale for design, the process you went you through to achieve your result, and a breakdown and explanation of the elements of your design.
  3. Use Photoshop CS6 to create a series of SIX unique concept-based web banners. You can use logo images found on the SAVE THE CHILDREN brand identity web page. Be consistent with your  designs. Make them look like they were designed specifically to focus on New Jersey and Hurricane Sandy. You are communicating one message, that SAVE THE CHILDREN is helping victims of SYRIAN REFUGEE’S and needs YOU to get involved by either supporting them, donating or volunteering.
  4. NOTE: At least one of the six designs must include an image. 

  5. RESOURCES ON THE SYRIAN REFUGEE CRISIS

    How to help Syrian refugees? These 6 groups you may not know are doing important work

    http://syrianrefugees.eu/

    Charity Navigator


DELIVERABLES:

Save the file as Date.LastName_FirstName_STCBannersv1 (change to v2 and v3).jpg .

Finished .JPG of your web banners should include the following:

  • Website banners in six sizes. See standard web banner sizes here. Create one of each size: Leaderboard, Square, Skyscraper, Rectangle, Button and Full Banner
  • A logo and phone number and/or url on all banners

A Word document (400 words) that includes the following:

  • Your concept
  • Your rationale
  • Your overall pitch to the Save the Children
  • If you had to do it all over again, what would you do differently
*****NOTE: Create your Photoshop document to be 300 dpi and 10″ wide. Then resize it down to web rez, 72 dpi.  SAVE THE FULL REZ FILES!******

HOMEWORK

  1. Finish all tutorials – Post to your homework page.
  2. Mini Project 1 due at the BEGINNING of class on MONDAY – Week 10.
  3. Delicious – Tag 3 sites that refer to banner design.
  4. Photoshop Major Project is due at the BEGINNING OF CLASS on week  11 Thursday – November 19th.

Week 9 | Monday | Word as Image

The Fundamental Elements of Design from Erica Gorochow on Vimeo.

EFFECTIVE BANNER DESIGN 1
#1 TUTORIAL | DO NOW


EFFECTIVE BANNER DESIGN 2
#2 TUTORIAL | DO NOW

Download the logo here


EFFECTIVE BANNER DESIGN 3
#3 TUTORIAL | DO NOW


HOW TO ANIMATE IN ADOBE CREATIVE CLOUD

In this tutorial we will be making a ball that moves across the screen.

METHOD 1

1) Create a new document

2) At the top of your screen, go to Window —> Timeline. At the bottom, a bar should appear. Change “Create Video Timeline” to “Create Frame Animation” by clicking on the arrow to the right. Click on “Create Frame Animation”.

*Your first frame will appear. Frames are numbered in the top left corner of the thumbnail.

3) Go to your shape tools and choose the Ellipse tool. Hold down shift to make your ball. Start this shape at the bottom left of the document.

4) Duplicate your first frame. You can do this by going to your Timeline panel. At the bottom, there should be an icon that looks like a paper with a folded corner (next to the trash icon). Click on the paper icon. This is your second frame.

5) Still on your second frame, turn off the layer with the Ellipse in your Layers panel by clicking on the eye icon. Then, duplicate that layer. Turn on the duplicate layer.

6) With the duplicated layer, move the ball slightly up and to the right, going towards the top right corner.

7) Repeat steps 4-6. Keep in mind to move the ball in each frame, and to turn off the layers that shouldn’t be seen.

8) Once the ball has reached the top right corner, select your first frame. In the Timeline panel, hit the play button. You’ve successfully animated a ball.

METHOD 2

1) Repeat steps 1-5 in the METHOD 1 tutorial.

2) Instead of moving the ball slightly on your second frame, move the duplicated ball to the top right corner.

3) In your Timeline panel, select your first and second frame by holding down the shift key and clicking.

4) At the bottom of your Timeline panel, there is an icon called “Tweens animation frame” (next to the folded paper icon).

*This tool allows you to make “in-betweens”. These are frames that add animation between key frames, this the name “Tweens animation frame”.

5) With your first and second frame selected, click on the “Tweens animation frame” icon. Hit “OK”.

You’ll notice that frames were added.
6) Click on the play button.

7) Now you’ve learned two methods of animating in Adobe Creative Cloud ✌

**How To Make A .GIF In Adobe Photoshop CS6**

1. To open up the ‘timeline’ to make animations, look on the bottom of your Photoshop screen. It’s next to ‘Mini Bridge’.

2. Once it’s open, you should see a frame with the no.1 to the top left of it. That is going to be the first panel that we use in our .GIF

3. Let’s just say we want to animate a capital M and make it a W. First, we’re going to use the Type tool and type the letter M.

4. Next, we’re going to duplicate the layer by right clicking and hitting ‘Duplicate Layer’.

5. After that we’re going to slightly rotate the duplicated M layer. To do that go to edit > transform > rotate, or just hit Command T. We’re going to rotate the shape 45° so to make it easier, hold Shift to rotate it smoothly.

6. Once this is done, go back down to the Timeline and click the ‘Add New Frame’ button (it looks like the new layer button).

7. By looking at our first frame, we should see the letter M, and for our second layer we should see ONLY the duplicated letter M, so in the second frame, turn off the first letter M layer, so we should only be left with the slightly tilted letter M.

8. After that we’re going to make another duplicate layer of the duplicate layer, so right click again and do so, AND we’re going to make another new frame in our timeline.

9. Rotate this layer another 45° so it should be 90° rotated from our original layer. Do this duplicating and rotating process 2 more times, until the final rotation of the M looks like a W, all while still creating new frames in the process.

10. Once we have all our frames (there should be 5 total) we’re going to make each frame last 0.5 seconds, and to do that click on where you see #sec on the bottom of the frames, and change it to 0.5 seconds.

11. We’re almost done ☺ Now, hit the play button (you should know what a play button looks like) and let’s watch this bad Larry move.

12. To save your .GIF go to File > Save For Web > Make sure it’s on GIF and 256 Colors > Save

NOTE:
Make sure you make a NEW FILE with 72dpi
Make a new file BEFORE making the timeline
Make sure the timeline is FRAME for frame

RESOURCE FOR OBTAINING SOUND

Sounds: http://www.sounds-resource.com
Sounds: http://soundbible.com/free-sound-effects-1.html

WORD AS IMAGE PROJECT I DUE ON MONDAY 11/9 AT THE BEGINNING OF CLASS

All listed below should be uploaded to both Flickr, Imgur for your animate GIF and your project page.

    • Dictionary Word Definition for Each Word
    • Thesaurus for Each of Your Three Words
    • Research – with comments for each piece of research
    • Inspiration – with comments for each inspiration
    • Mind Map
    • Three Sketches of Each Word
    • Color Sketches of Each Word
    • Photoshop Iterations
    • Final Photoshop PSD Files
    • Final Photoshop JPG Files
    • Word document description – 400 words
      • This must be on your website as well as printed on paper
    • All three words animated
    • Sound added to all three words
    • A DropBox link to ALL files and project paper

    All of the above should be uploaded to both Flickr, Imgur and your project page. Final Three Words Animated

Resource on adding sound in Photoshop

In the Photoshop animation timeline, the last line in the timeline is called AUDIO.

  • To add audio, click on the music  note button.
  • Add file.
  • Select file.
  • You can fade the audio in and out.

SAVE YOUR ANIMATED GIF WITH SOUND

  • File > Export
  • Render Video
  • Use all the default options
  • Save it to your desktop
  • Create a YouTube account
  • Upload the MP4 video file
  • In YouTube, click on share, click on embed, choose the size you want, click copy
  • Go to  your project page, click on TEXT view for your posts (not the visual view), paste the code and hit save. The video file will appear on your post.

HOMEWORK

FINISH the three tutorials PLUS the letter M and upload to your homework page.

Revise your words if necessary.

IF you change your words you need to complete the following:

    • Dictionary Word Definition for Each Word
    • Thesaurus for Each of Your Three Words
    • Research – with comments for each piece of research
    • Inspiration – with comments for each inspiration
    • Three Sketches of Each Word
    • Color Sketches of Each Word
    • Photoshop Iterations
    • Final Photoshop PSD Files
    • Final Photoshop JPG Files

DUE THURSDAY – MINI PROJET I

    • All three words animated
    • Sound added to all three words
  • All of the above should be uploaded to both Flickr, Imgur and your project page.

 

Week 8 | Thursday | PS Banner Ads

******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.******* 

When Saving Images: Save as: 

  • Example: 2015_Smith_John_AccessingTools_v1
  • Tag your images in Flickr with the following tag:

    msuadobecreativesuite2015


Banner Design for the Web

Advertising is everywhere, and with Google ad words, Facebook ads, and sponsored Twitter tweets, advertising on the Web is the future. Many site generate 100% of their revenues directly from banner ads.

Examples

CSS Remix
The ads on CSS Remix are displayed along the top of the site and blend in well with the site listings.

Design Bombs
Design Bombs displays their 125px ads on the left-hand sidebar. The ads fit in with the other gallery listings on the site.

Behance Network
The  Behance Network website design has small sponsor boxes down the right-hand column that display ads next to their content.

  • Know what you want to say.
  • Create a call to action, something to make the viewer want to click on your ad for more information.
  • Design for horizontal or vertical .

Here are some useful design tips:

  1. When you design your ad, keep it simple and clear, free of clutter with a message that’s easy to read. It must jump out from the rest of the message.
  2. Use animation, but sparingly. You don’t want to irritate the viewer.
  3. The animation should not interfere with the design or message.
  4. The animation should loop no more than ten times.
  5. Keep file sizes small. It’s important that your animations load quickly. While Flash creates great animations, it can also create large files. For this reason it’s better to use compressed JPEGs or GIF files.
  6. When designing a banner, it’s important to understand the importance of branding, so make sure you use the company logo in some way.
  7. Make sure your message and call to action is on the first page in case the user decides to stop the animation.
  8. Use bright blue, green and yellow colors. Avoid red.
  9. Some words that can improve your click through ratio (CTR) are: Click here, submit and free.
  10. Make sure the banner links to the page that has the information mentioned on the banner. Don’t make them hunt for it.

DESIGN RESOURCES
Standard Web Banners
Banner Ads: Excellent Examples for Inspiration


TUTORIAL #1: Designing a simple website banner with a logo 

banner_1

  • Complete the tutorial – listed below
  • Title your image: date_yourname_PS_WebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND jpg file of the tutorial.
  • Post it to Flickr and to your website.

Follow the below steps to create the above website banner :

Step 1 : Creating the banner size
Open a new file by clicking on File>New. Make the file size width of 780px and height of 120px. You can go till 140px for the height. You can make a banner flexible according to your design.

Step 2: Giving the background color
Create a new layer. Name it bgcolor. Give a background color by doing the following:

  • Change the foreground color to #E4D1B8.
  • Click on the  Paint Bucket Tool seen in the tools panel on the right.
  • Click on the canvas with your mouse. Your background color is now changed to the new color.

Step 3 : Giving the inside background color
Create a new layer. Name it insidecolor. Select  Rectangular Marquee Tool seen in the tools panel on the right. Make the rectangle size width of 760px and height of 100px inside the background. Fill it with color # C64866 using the paint bucket tool.

Step 4 : Creating the logo background
Create a new layer. Name it logobkg. Select Rectangular Marquee Tool. Make the rectangle size width of 120px and height of 100px. Put the rectangle in the left side of the banner. Fill it with black color # 000000.

Step 5 : Creating a logo using the custom shape tool
Create a new layer. Name it logo. Choose the  custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner.

Drag it in the logo space and position it so it comes in the middle of the logo background. Now you have a temporary ornament as a logo which can be replaced with your company logo if needed.

Step 6 : Creating the vertical lines in the banner
Create a new layer. Name it band. Select Rectangular Marquee Tool. Make the rectangle size width of 7px and height of 120px. Put the rectangle in the middle of the banner. Fill it with color # E8B0BD. Make four copies of the layer band.

Step 7 : To make a copy, right click on the layer and click on duplicate. A screen named Duplicate Layer will appear.

Enter name of the layer as band copy. Click on OK. Do the same with band copy2, band copy3, band copy4. Place the bands properly in the banner.

Step 8 : Creating the Logo Border
Create a new layer. Name it border. Select Rectangular Marquee Tool. Make the rectangle size width of 20px and height of 100px. Fill it with color # A63D56. Put the rectangle on the right of the logo background. Make a copy and place the new rectangle on the left of the logo background.

Step 9 : Creating the dashed lines
Now select the  Horizontal Type Tool (text tool). Type” _________” using the hyphen key. Place it on the top of the banner. Make a copy, right click on the layer and click on duplicate. Place it at the bottom of the banner.

Step 10 : Adding your Company Name
With the text tool  type your company name or website name with the color # FCF3E5.

  1. Save your file and name it as follows: 2015.10.28.Smith_John_Banner

TUTORIAL #2 : How to Create an Animated Banner Ad

  • Complete the tutorial – listed above
  • Title your image: date_yourname_PS_AnimatedWebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND GIF file of the tutorial.
  • Post it to Imgur and to your website.
    1. Save your file and name it as follows: 2015.10.28.Smith_John_Animated+Banner

#3 DO NOW Buttons, Bars & Tabs

Techniques for creating navigation elements.

Watch video and complete button tutorial. View it here.

  1. Save your file and name it as follows: 2015.10.28.Smith_John_Buttons

#4 DO NOW Ribbons and Banners

Watch video and complete tutorial. Ribbons and Banners

  1. Save your file and name it as follows: 2015.10.28.Smith_John_Ribbons

#5 DO NOW Tiled Backgrounds and Seamless Textures

Tiled Backgrounds and Seamless Textures

Watch video and complete tutorial.

  1. Save your file and name it as follows: 2015.10.28.Smith_John_Textures

#6 DO NOW Shadows

Shadows

Watch video and complete icon tutorial.

  1. Save your file and name it as follows: 2015.10.28.Smith_John_Shadows

Week 6 | Homework

FINISH THE IN-CLASS TUTORIALS

DELICIOUS

On your del.icio.us account tag three Web Sites that focus on Photoshop CS 6:

  • Designing Banner Ads in Photoshop
  • Animated Banner Ads
  • Animating Timeline

and write a note in the Delicious comments section about why you think each one would be a good resource for this class.

PS Mini Project I
DUE ON MONDAY:

  • Dictionary Word Definition for Each of your Three Words
  • Thesaurus for Each of Your Three Words
  • Research – (Delicious) Tag 3 Sites with comments for each piece of research
  • Inspiration -(Pinterest)  Word as Image Pinterest Board – tag 10 sites
  • Three Low Fidelity Sketches of Each Word
  • Three High Fidelity Color Sketches of Each Word
  • Photoshop Iterations (Not Animated)

WORD AS IMAGE PROJECT I DUE ON THURSDAY 11/5 AT THE BEGINNING OF CLASS

A STORY OF MIXED EMOTICONS


WORD AS IMAGE

All listed below should be uploaded to both Flickr, Imgur for your animate GIF and your project page.

    • Dictionary Word Definition for Each Word
    • Thesaurus for Each of Your Three Words
    • Research – with comments for each piece of research
    • Inspiration – with comments for each inspiration
    • Three Sketches of Each Word
    • Color Sketches of Each Word
    • Photoshop Iterations
    • Final Photoshop PSD Files
    • Final Photoshop JPG Files
    • Word document description – 400 words
      • This must be on your website as well as printed on paper
    • All three words animated
    • Sound added to all three words
    • A DropBox link to ALL files and project paper

    All of the above should be uploaded to both Flickr, Imgur and your project page. Final Three Words Animated

Resource on adding sound in Photoshop

In the Photoshop animation timeline, the last line in the timeline is called AUDIO.

  • To add audio, click on the music  note button.
  • Add file.
  • Select file.
  • You can fade the audio in and out.

SAVE YOUR ANIMATED GIF WITH SOUND

  • File > Export
  • Render Video
  • Use all the default options
  • Save it to your desktop
  • Create a YouTube account
  • Upload the MP4 video file
  • In YouTube, click on share, click on embed, choose the size you want, click copy
  • Go to  your project page, click on TEXT view for your posts (not the visual view), paste the code and hit save. The video file will appear on your post.

RESOURCE

**How To Make A .GIF In Adobe Photoshop CS6**

1. To open up the ‘timeline’ to make animations, look on the bottom of your Photoshop screen. It’s next to ‘Mini Bridge’.

2. Once it’s open, you should see a frame with the no.1 to the top left of it. That is going to be the first panel that we use in our .GIF

3. Let’s just say we want to animate a capital M and make it a W. First, we’re going to use the Type tool and type the letter M.

4. Next, we’re going to duplicate the layer by right clicking and hitting ‘Duplicate Layer’.

5. After that we’re going to slightly rotate the duplicated M layer. To do that go to edit > transform > rotate, or just hit Command T. We’re going to rotate the shape 45° so to make it easier, hold Shift to rotate it smoothly.

6. Once this is done, go back down to the Timeline and click the ‘Add New Frame’ button (it looks like the new layer button).

7. By looking at our first frame, we should see the letter M, and for our second layer we should see ONLY the duplicated letter M, so in the second frame, turn off the first letter M layer, so we should only be left with the slightly tilted letter M.

8. After that we’re going to make another duplicate layer of the duplicate layer, so right click again and do so, AND we’re going to make another new frame in our timeline.

9. Rotate this layer another 45° so it should be 90° rotated from our original layer. Do this duplicating and rotating process 2 more times, until the final rotation of the M looks like a W, all while still creating new frames in the process.

10. Once we have all our frames (there should be 5 total) we’re going to make each frame last 0.5 seconds, and to do that click on where you see #sec on the bottom of the frames, and change it to 0.5 seconds.

11. We’re almost done ☺ Now, hit the play button (you should know what a play button looks like) and let’s watch this bad Larry move.

12. To save your .GIF go to File > Save For Web > Make sure it’s on GIF and 256 Colors > Save

NOTE:
Make sure you make a NEW FILE with 72dpi
Make a new file BEFORE making the timeline
Make sure the timeline is FRAME for frame

RESOURCE FOR OBTAINING SOUND

Sounds: http://soundbible.com/free-sound-effects-1.html

 

Week 8 | Monday PS II

******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.******* 

When Saving Images: Save as: 

  • Example: 2015_Smith_John_AccessingTools_v1
  • Tag your images in Flickr with the following tag:

     msuadobecreativesuite2015


The Tools of Photoshop

An introduction to the Brush tool, and its available customization options. Whether you’re looking to paint a masterpiece or retouch a photo, the Brush tool is a crucial tool to understand!

In-class Assignment #1 –  USING THE BRUSH PRESETS  
  1. Select the Brush tool and then select the Toggle the Brush panel button in the Options bar. The Brush panel appears.
  2. Select the Brush Presets tab to bring it forward and then select Small List from the panel menu.
  3. Click on the Round Curve Low Bristle Percent preset.
  4. Using the Size slider click and drag the size of the brush to approximately 205px.
  5. With the Brush tool still selected,  hold down the Option key and sample a color of the woman’s skin color. Choose a darker shade if possible.
  6. In the Options bar, click on the Mode drop-down menu and select Multiply.
  7. Use large wide brush strokes to paint over the woman playing the guitar.

***Save the PSD and upload the jpg to your blog and Flickr. 

  1. Save your file and name it as follows: 2015.10.26.Smith_John_Brush

In-class Assignment #2 – USING THE AIRBRUSH FEATURE  
Using the airbrush option allows your paint to spread much like the effect you would have using a true airbrush.
  1. Select Round Fan Stiff Tin Bristles from the Brush Preset panel. Change the value to 200px.
  2. Press D to return to the Photoshop default colors of Black and White.
  3. If the Mode drop-down menu in the Options bar is not set to Normal, set that to Normal now.
  4. Click and release with your cursor anywhere on the image to stamp a brush stroke onto the image. Do this a few more times.
  5. Now, Select the Enable airbrush-style build-up effects in the Options bar.
  6. Use the same brush preset, click and hold on your image to notice that the paint spreads, as you hold.
  7. When you are finished experimenting, return the Flow control back to 100%.

***Save the PSD and upload the jpg to your blog and Flickr.  Save your file and name it as follows: 2015.10.26.Smith_John_Airbrush


In-class Assignment #3 – Creating a Border Using the Bristle Brushes 
Now we’re going to use a bristle brush to create an artistic border around the edge of the image.
Select the Round Blunt Medium Stiff bristle brush from the Brush Presets panel.
Choose any color that you want to use for the border you’re about to create.
Click in the upper-left corner of the image. Hold down the Shift key and click in the lower-left corner. By Shift+clicking you have instructed Photoshop that you want a stroke to connect from the initial click to the next.
Shift+click in the lower-right corner, and then continue this process until you return to you original stroke origin in the upper-left corner.
***Save the PSD and upload the jpg to your blog and Flickr. 
  1. Save your file and name it as follows: 2015.10.26.Smith_John_Bristle_Brushes
Here’s the BEFORE photo:
guitar
Here’s the AFTER picture:
ps0602_done

In-class Assignment #4 – Applying Color to an Image
You can color anything in Photoshop by using different opacity levels and blending modes. Let’s take a grayscale image and tint it with color.
  1. Double-click on the Zoom tool to change the view to 100%.
  2. Choose Image > Mode > RGB Color. In order to color a grayscale image, it needs to be in a color mode.
  3. Open Window > Swatches
  4. Select the Brush tool and Ctrl+click on the canvas to open the contextual Brush Preset picker. Select the Soft Rounded brush (this should be the first brush). Slide the Size slider to 25 and the Hardness slider to 5. Press Return key.
  5. Using the Opacity slider in the Options bar, change the opacity of the brush to 85%.
  6. Position you cursor over a brown color in the Swatches panel.
  7. Using the Brush tool, paint the boy’s hair.
  8. Press Option Z to delete the painting.
    1. Save your file and name it as follows: 2015.10.26.Smith_John_Color

 In-class Assignment #5 – Changing Blending Modes

You can use Opacity to alter the appearance of a brush stroker but you can also use blending modes. The blending mod controls how pixels in the image are affected by the painting.
  1. In the Options bar, change the opacity to 50%.
  2. Select Color from the Mode drop-down list.
  3. Using the Brush tool, paint over the boy’s hair.
  4. Finish painting the hair brown and save the image.
    1. Save your file and name it as follows: 2015.10.26.Smith_John_Blending
***Save the PSD and upload the jpg to your blog and Flickr. 

In-class Assignment #6 – The Eyedropper Tool 
The Eyedropper tool is used for sampling color from an image. For this in-class assignment, we’re going to use the Eyedropper tool to sample a color from another image to colorize te boy’s face.
  1. Make sure the original black and white photo of the boy is open.
  2. Select Window > Arrange > 2-up Vertical to see both images.
  3. Click on the title bar of the color photo to bring that image forward.
  4. Choose the Eyedropper tool and position it over the boy’s face in the color image. Click once on his left cheek. The color is selected as the foreground color in the Tools panel.
  5. Select the Brush tool, then using the Options bar at the top, make sure that Color is selected from the Mode drop-down menu and that the Opacity slider is set at 15%.
  6. Position your cursor over the image to see the brush radius size. Press the ] until the brush is 150px wide.
  7. Click on the title bar of the black/white image and with the Brush tool selected, paint the boy’s face.
  8. Remember, your Opacity is set at 15% so you’ll build up the skin tone color by painting over areas again.
  9. With the Brush selected, press the Option key and sample the blue color from the striped shirt in the color image.
  10. Press the [ (left bracket) key until the brush size is about 60px.
  11. Press the number 5. By pressing 5 you can indicate that you want 50% opacity.
  12. Position the paint brush over one of the boy’s eyes in the black/white image and click to paint it blue. Repeat with the other eye.
    1. Save your file and name it as follows: 2015.10.26.Smith_John_

***Save the PSD and upload the jpg to your blog and Flickr. Save it as LastName-First_name_PaintingFullBoy.

  1. Save your file and name it as follows: 2015.10.26.Smith_John_Full_Boy

Open image ps0605 here. This is what the finished image will look like. Download this background image.


In-class Assignment #7 – Clone Stamp Tool(Looks like a rubber stamp)

  1. Select the Zoom tool and click and drag a marquee around the top half of the image.
  2. Select the Clone Stamp tool.
  3. Position your cursor over the nose of the girl and hold down the Option key. When you see the crosshair, click with your mouse. You’ve just defined the source image area for the Clone Stamp tool.
  4. Position the cursor to the right side of the girls face, then click and drag to start painting with the Clone Stamp tool.
  5. Press the ] (right bracket) to enlarge the Clone Stamp brush.
  6. Change the Opacity to 50% to clone at a 50% opacity or go back to 100% if you want full opacity.
  7. Save your file and name it as follows: 2015.10.26.Smith_John_Clone
  8. Upload to your blog and Flickr and save your .psd file.

Here are a few tools that will help heal your photos, from cloning, to healing, to patching.


Repairing Fold Lines
Using the History command to reopen the image of the girl in it’s original state.

In-class Assignment #8 – Repairing Fold Lines

  1. Select the Zoom tool and check the Resize Windows To Fit check box in the Options bar.
  2. Click three times in the upper-right corner of the image to reveal the fold marks that you will repair with the Clone Stamp tool.
  3. Select the Clone Stamp tool and Ctrl+click on the image area to open the Brush Preset picker. Click on the Soft Round brush and change the Size to 13px. Press the Return key.
  4. Position your cursor to the left of the fold mark, and hold down the Option key and click to define the area as the source.
  5. Position the Clone Stamp tool over the middle of the fold line itself, and click and release.
  6. Press Shift+[ (left bracket) several times to make your brush softer.
  7. Continue painting over the fold lines in the upper-left corner.
  8. Save your file and name it as follows: 2015.10.26.Smith_John_FoldLines
  9. Upload to your blog and Flickr and save your .psd file.

The Spot Healing Brush (Looks like a band-aid)
The Spot Healing Brush tool paints with sampled pixels from an image and matches the texture, lighting, transparency, and shading of the pixels that are sampled to the pixels being retouched, or healed. UNLIKE the Clone Stamp tool, the Spot Healing Brush automatically samples from around the retouched area.

 

In-class Assignment #9 – Spot Healing Brush

  1. Using the History panel, go back to the original image and select the Zoom tool. Click and drag the lower-right section of the image to zoom into the lower-right corner.
  2. Select the Spot Healing Brush tool and click and release repeatedly over the fold marks.
  3. Using the Spot Healing Brush, repair the fold lines.
  4. Save your file and name it as follows:  2015.10.26.Smith_John_SpotHealingBrush
  5. Upload to your blog and Flickr and save your .psd file.

The Healing Brush (Looks like a band-aid with dotted lines)
The Healing Brush tool also lets you correct imperfections. Like the Clone Stamp tool, you use the Healing Brush tool to paint with pixels you sample from the image, but the Healing Brush tool also matches the texture, lighting, transparency, and shading of the sampled pixels. Now we’re going to remove some defects from the girls dress.

 

In-class Assignment #10– Healing Brush

  1. Go back to the original version of the image. Choose View > Fit on Screen.
  2. Select the Zoom tool, then click and drag over the bottom area of the girls dress.
  3. Click and hold on the Spot Healing Brush to select the hidden Healing Brush tool.
  4. Position your cursor over an area near to, but outside, the fold line in the skirt, as you are going to define this area as your source. Hold down the Option key and click to define the source.
  5. Paint ove the fold line that is closest to the source area you defined.
  6. Repeat this process. Option+click in appropriate source areas near the fold across the dress, then paint over the fold lines, using the Healing Brush tool.
  7. Save your file and name it as follows: 2015.10.26.Smith_John_HealingBrush
  8. Upload to your blog and Flickr and save your .psd file.

The FINAL images encompasses ALL the tools used above. Save it as 2015.10.26.Smith_John_RetouchingFinal


Homework | Week 7 
  • Complete all assignments listed in this class post.
  • Delicious:

Tag three sites that focus on Photoshop which refer to any of the techniques we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class.

  • If you did NOT finish all the in-class assignments, please finish it for homework and upload to both Flickr and your site. SAVE YOUR PSD’S.

Week 7 | Thursday | AI Project II Due

Illustrator Project II Due

PSD vs JPG vs GIF vs PNG

PSD preserves all the layers in your file. You should ALWAYS save a copy of your image as a PSD. Once you’ve done that, then consider which file format below best fits your needs.

Image File Formats: There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way.

Jpeg
Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.

Gif
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.

Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.

Image Size
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.

File Size refers to the amount of disk space an image occupies (in KB or MB). Image Dimensions refers to the physical size of the image, expressed in height and width.

Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.

Compression

Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.

Saving

Click the Save button to save your image. ALWAYS save your original photo for archiving, or if you intend to reopen it later PRIOR to using the save for web.


Save and Export

There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.

1) Save as: I recommend saving the file type as a Photoshop or .PSD file, which will also save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. Saving as a .jpg, .png or .gif compresses the photo allowing you to use it on the web.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web.  The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.


Photoshop | Creating New Documents


LAYERS

Photoshop Essentials | What Is a Layer?
Exploring layers: what they are, how they’re created and the different layer options that are available.


The Brush Tool

An introduction to the Brush tool, and its available customization options. Whether you’re looking to paint a masterpiece or retouch a photo, the Brush tool is a crucial tool to understand!


TUTORIALS

  • ASSIGNMENT | ACCESSING TOOLS #1

Download the attached zip file which includes PSD files for this accessing tools assignment here.

  1. Select the Brush tool. By default, your brush tool is loaded with black paint.
  2. Click once on the foreground color to open the pick so you can select a different color in you foreground.Select a blue color to use to brighten up the sky.
  3. Click on the Brush Preset Picker to see your option for size and hardness.
  4. Click and drag the size slider, to the right until you reach 100px. Make sure the Hardness slider is at 0%. You’ve just changed the brush to a large soft brush that will blend well with the edges of the strokes.
  5. Click and drag anywhere on the image one time to create a brush stroke across the image. Click Command Z to undo.
  6. Click and hold the Painting Mode drop-down menu and select Color from the bottom of the list.
  7. Click the arrow to the right of the Opacity option to see the slider Change Opacity to 20%.
  8. Click and drag on the upper right corner of the image. You’ll be brightening the sky.
  9. Note: You can build up color by releasing the paint brush and painting over the same area.
  • Save image 1 with new filename.
  • Example: 2015_Smith_John_AccessingTools_v1

  • ASSIGNMENT | BRUSH TOOLS #2
  1. With the car photo still open:
  2. Select the Brush tool.
  3. Click the Swatches tab.
  4. Click the color called Pure Red Orange.
  5. With the Brush tool selected, start painting in the upper-left part of the image, adding orange to the sky.
  6. Paint the sky until the orange blends in.
  • Save image II with new filename.
  • Example: 2015_10_22_Smith_John_BrushTools_v1

  • ASSIGNMENT  | HIDDEN TOOLS #3

  1. Click and hold on the Brush tool to see the hidden Pencil, Color Replacement and Mixer brush tools.
  2. Select the Mixer Brush Tool and release. The Color Mixer tool is now the visible tool. The Mixer Brush simulates realistic painting techniques.
  3. Change the foreground color at the bottom of the Tools panel. The Color Picker appears.
  4. Position your cursor on the Color Slider and click and drag until shades of orange appear in the Color Panel.
  5. Click once in the Color Pane to select and orange color or type in the RGB: R:235 G:169 B:24.
  6. Click on the Brush Preset picker button in the Options bar and set the following attributes for the Mixer Brush tool.
  • Size: 175 px
  • Hardness: 20%
  1. Click once on the Useful mixer brush combinations drop-down menu and select the Moist, Light Mix preset.
  2. Press Command+0. (This is the keyboard shortcut for Fit on Screen.
  3. With the Mixer Brush tool still selected, start painting in the upper-left areas of the image to create a shade of orange blending in from the corner.
  4. Repeat this for all four corners in the image.
  • Save image III with new filename.
  • Example: 2015_10.22.Smith_John_HiddenTools_v1

  • ASSIGNMENT | COMPOSITE #4

Download the attached zip file which includes PSD files for this composite assignment here.

  1. Watch the video below that describes how to create a composite photo and recreate the barn/chicken/cow image.
  2. Using the farm image, try adjusting the stacking order of the layers in the composite image
  3. Scale and move the layers to place the cow and rooster in different positions.
  4. Add your own images to the composition, adjusting their position and scaling.
  5. Save the images as JPEG files using the different compression options and presets to determine the impact these have on quality and file size.
You should end up with a total of FIVE different images. Upload them to your Flickr site and label them:
YYYY_MM_DD _YourName_Farm_01
YYYY_MM_DD _YourName_Farm_02
YYYY_MM_DD _YourName_Farm_03
YYYY_MM_DD _YourName_Farm_04
YYYY_MM_DD _YourName_Farm_05

Tag your images in Flickr with the following tag:

 msuadobecreativesuite AS WELL AS add additional tags. 


  • ASSIGNMENT  |  PHOTO COMPOSITION #5

Experimenting with New Vector Capabilities

  1. Open file: ps0101.psd – image of a skier
  2. Save it as: ps0101_work and choose Photoshop format
  3. Select the Rectangle tool – click and drag to create a large rectangle that covers the right half of the image. (You’ll notice a Rectangle 1 vector layer has been added in the Layers panel)
  4. With the Rectangle 1 vector layer active, click Fill in the Options bar, and then click the Pattern button.
  5. Select Grey Granite as the pattern.
  6. Click and hold the Rectangle tool and select the hidden Custom Shape tool.
  7. Click the arrow in the Shape drop-down menu to see default shapes.
  8. Click the gear icon and select Nature category.
  9. Choose Append – Select the Snowflake shape – Click on the Path operations – select Subtract Front Shape.
  10. Position mouse in the middle of the left side of the Rectangle shape and press and hold the Option key. Click and create to create a large snowflake.
  11. Click the Path Selection tool to reposition.
Continue with the following:
  1. Adding a mask to a Vector layer
  2. Using the new brush tips
Adding strokes to vector images
Cloning your new snowflake
Adding text layers from another document

  •  ASSIGNMENT | COMPOSITE #6

Variations on the ski project.

Use the PSD file from composite assignment v1 above and change the pattern from grey granite to the selection of your choice. Change the nature shape in the first version to a shape of your choice. Change brush tip, gradient, font, color, size of the text and anything else you want to make it look different. When you finish, save the file as follows: 2015.2.Smith_John_Composite_v2


  •  ASSIGNMENT | MAKING THE BEST SELECTIONS #7

Download all project zip files below. Unzip the files and place all files in one folder on your desktop.

PS04_01  PS04_02 PS05_03 PS04_04 PS04_05 PS04_06 PS04_07 PS04_08 PS04_09


When you finish, save the file as follows: 2015.10.22.Smith_John_Selections


Making the Best Selections

  •  ASSIGNMENT | Marquee Tool #8

Open image ps0501 here. Open image ps0501_done here.

Use the image above to create an overlay with text.

  1. Select the Rectangualr Marquee tool, (the square with the dashed lines). Choose View > Snap and make sure it’s checked.
  2. Position your cursor in the upper-left side of the guide in the care image, and drag a rectangular selection down toward the lower-right corner of the guide. A rectangular selection appears as ou drag, and it stays active when you release the mouse. You’ll now apply an adjustment layer to lighten just the selected area of the image. You are lightening this region so that a text overlay can be placed over that part of the image.
  3. If the Adjustments panel is not visible, choose Window > Adjustments and click on the Curves icon;the Properties panel appears. (Click on the Curves button to create a new Curves adjustment layer.)
  4. Click and drag the upper-right anchor point (shadow) straight down, keeping it flush with the right side of the curve window, until the Output text field. The rectangular selection in the image is lightened to about 20% of it’s original value.
  5. Go back to the Layers panel, click the box to the left of the text layer named poster text; the Visibility icon (the eye) appears, and the layer is now visible. The text appears over the lightened area.
  6. Save your file and name it as follows: 2015.10.22.Smith_John_Text_MarqueeTool
  7. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a Square Selection #9
  1. Click on the image background in layers.
  1. Select the Rectangle tool.
  2. Click and drag while holding the Shift key  to create a constrained square.
  3. Let go of the mouse and see the square. Notice the dotted lines. This means you can move the square around.
  4. Click on the Curves icon and change the opacity.
  5. Click on the Selection tool and position the cursor over the selection region. Now you’ll notice a scissors appears. This means that if you move the selection, it will cut out a portion of the photo. The pixels will be deleted.
  6. Press Command Z to undo.
  7. Reselect the square, then choose Image > Adjustments > Hue/Saturation. Click and drag the Hue sliders to cange the color of the selection region.
  8. Add text.
  9. Save your file and name it as follows: 2015.10.22.Smith_John_Text_MarqueeTool_Square
  10. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a selection from a center point #10 
  1. Select the Background layer in the Layers panel, then click and hold the Rectangular Marquee too and select the hidden Elliptical Marquee tool.
  1. Draw a circle selection from the center of the image.
  2. Place your cursor in the center of the tire, and hold down the Option and Shift key.
  3. Click and drag to pull a circular selection from the center origin point.
  4. Release the mouse.
  1. If you need to nudge the circle around, use the up/down, left/right arrows.
  1. Click Select > Transform Selection. You’ll see a bounding box appear around your selection Use the bounding box’s points to adjust the size and proportion. Note: To scale proportionally, hold down the Shift key when transforming. Press the Enter key to accept changes.
  1. Follow the directions from in-class exercise #1 starting at no. 3 to add the opacity and then the text.
  2. Save your file and name it as follows: 2015.2.16.Smith_John_Text_MarqueeTool_CenterPoint
  1. Upload to your blog and Flickr and save your .psd file.

 ASSIGNMENT | Changing a selection into a layer #11
By moving a selection to its own independent layer, you can have more control over the selected region while leaving the original image data intact.
  1. Make sure the Background layer is selected.
  2. Select the tire with the Ellipse tool holding down Option/Shift.
  3. Press the Command and J key to create a new layer. You’ll then see the new layer in your layers panel.
  4. Apply a filter: Choose Filter > Blur > Motion Blur. You’ll see a dialog box.
  5. Type 0 in the Angle text field and 45 in the Distance text field and press OK. You’ll see the motion blur applied.
  6. Save your file and name it as follows: 2015.10.22.Smith_John_Text_MarqueeTool_ChangingLayer
  7. Upload to your blog and Flickr and save your .psd file.

Homework | Week 7 Thursday  
  • Complete all assignments listed in this class post.
  • ASSIGNMENT | PHOTOSHOP BASICS 
  1. Delicious:  Tag three sites that focus on Photoshop and any of the items we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class.
  1. If you did NOT finish the farm assignment in class, please finish it for homework.
  • FINISH all tutorials not completed in class.

Week 7 | Monday | Photoshop

Intro to Photoshop

Adobe Photoshop is the industry standard tool for working with digital images. Whether the image comes from a digital camera, scans, stock imagery, Web-ready artwork, or even vector graphics, all of them can be manipulated in Photoshop. Used for both enhancing and manipulating photographs as well as creating original artwork, Photoshop is used by photographers, designers, videographer and 3d artists.


Adobe Photoshop Overview

Adobe Photoshop CAN:

  • Rotate an image
  • The Crop  Tool: Crop or resize images
  • Modifying Color
  • Crop an image
  • Align an image
  • Correcting Exposures
  • Adjust tonal properties such as lightening a dark image
  • Restoring and Retouching Images
  • Combining multiple images into composites
  • Simulating a variety of lens effects
  • Color correction of images
  • Dust and scratch removal
  • Opening or saving in a variety of file formats
  • Photoshop integrates with InDesign for print production, After Effects for video compositing and Illustrator for print design.
Designers use Photoshop to create:
  • Textures for website backgrounds
  • Manipulating.type
  • Creating comps of website and mobile applications
Videographer use Photoshop for:
  • Assembling image sequences into timeline animation
  • Removing unwanted objects from frames in their video
  • Repairing video using the cloning and healing tool
  • Creating frame by frame animations

3d Artists use Photoshop for:

  • Creating 3 dimensional shapes used in other applications
  • Creating 3d objects
  • Painting 3d environments
Adobe Photoshop CANNOT:
  • Make a blurry photograph sharper
  • Increase the size of a low resolution image to a large one
  • Change a raster based image into a vector based image

The Photoshop CS6 Interface

This video covers the basics of the Photoshop interface, from changing the interface’s color, finding the Tools bar, the Options bar and exploring Photoshop’s panels.


Getting Started – 1. Workspace Layout

2. Options Bar

Located just below the main menu on Mac computers, the options bar is contextual in nature. Depending on which tool you’re on, the options displayed will change.

3. Tools Palette
Many of the icons used for the tools in Photoshop are now industry standards across all types of software including Illustrator, InDesign and After Effects.

You can align your tool palette to show two rows of tools as opposed to one. It’s your choice. Notice, if  you see a small triangle in the lower right hand corner on any of the icons on a tool in the tool bar, it signifies that there is more than one tool to choose from in that button.

Just click and hold down the button and a small window will pop up offering additional tools.

4. Common Tools
Crop Tool: Used to cut off a portion of your photo or resize the photo.

Lasso Tool:

Used to select a specific part of a photo. If you want to draw a shape on your photo, use this tool. It forms a selection marquee and any adjustments you make will only affect this portion of the photograph.

Text Tool:

Allows you to add text to your image. Any text placed on your image will become part of your image once the document is saved.

Dodge and Burn Tools:Allows you to dodge light from the image, causing it to lighten. Or, force light into a particular area to darken (burn) the image. The opacity setting allows you to gradually implement these tools.

Rubber Stamp:Also known as the clone tool, the rubber stamp allows the user to manipulate the photo in some way by sampling a particular area of a photo, and stamping it in another area. To sample, press and hold the ALT key.

5. UNDO and History Palette
Command-Z (Mac) or CTRL-Z (PC) is the “undo” command that will undo the last action you took. Photoshop only allows you to undo the last step when using this shortcut. To undo more than one action, pull up the History palette.  Window –> History menu. The history palette stores every action you take in the program as a list. To undo, simply click on a previous item on the list and it will undo every action listed after it.

6. Opening an Image
To open an image, click on the File menu and select Open. You can also use the Browse option. By using Browse, Photoshop will automatically launch another Adobe Bridge, which allows you to preview thumbnails from folders.


Rotating images

If your image is crooked or not aligned to the horizon,  you may want to rotate it. Go to the image menu and select Image Rotation and select either 90 degrees Counter Clockwise (90 CCW), or 90 Clockwise (90 CW) depending on which way the photo is situated. Click 180 degrees if the photo is completely upside down.

Straightening a Crooked Image Video


The Crop Tool

Once you have the image open, click on the crop tool in your tool palette. Then click and drag open a box on your image, highlighting the area you want to crop.

Notice the anchor points, the small boxes in the corner of the image, You can click and drag on the small boxes to reshape your crop. When hovering over the boxes, your mouse cursor will change into different arrows indicating how that anchor point will shape the crop if you click on it. When you hover your mouse arrow just outside one of the corner boxes, it changes your cursor into a curve. This curve indicates that it will rotate your crop.

Resizing while Cropping

You can save a lot of time by resizing the image while you are cropping. You’re telling Photoshop which dimensions the image should result in after your crop.  Place a numerical value for inches or points in the width and height fields, you can also put in a resolution value, in the option bar while the crop tool is selected.  If you write 600px, that stands for 600 pixels. If you write 600in, that stand for 600 inches. Photoshop normally defaults to “in”, which stands for “inches”.

You don’t necessarily have to crop an image to resize it. That’s just an added plus if you were planning on cropping the image anyway. If you wish to resize your image without cropping, Photoshop offers a number of methods. Click on the image menu. The image resize option will be found under here.

Resizing Images

You can resize an image by cropping it or without cropping it, Photoshop offers a number of options. Click on the image menu, then image size. The image size dialogue box will display and present list of options. There are two sections to this dialogue, the Pixel Dimensions section at the top and the Document Size at the bottom.  In the pixel dimensions section, you type in the values of the height and width. If the Constrain Proportions checkbox is checked, then when you change either the height and width the other value will change respectively based on the ratio of their dimensions. If you don’t have this box checked, you will distort the photograph when resizing.

Using the new Crop tool in Adobe 6.0 Video


Tones, Contrast and Color

There are many ways to adjust an image in Photoshop, it’s really your preference.

Adjusting Levels

To adjust levels go to the menus Image –> Adjustments –> Levels

You’ll see a graph showing the values across the spectrum of the image called a histogram. To simplify it:, the left side of the graph is the shadows and blacks and the right side displays the highlights and whites. You note in the graph that there are few black or white tones, as the graph is rather flat on the edges. To adjust the image, move the three slider arrows at the bottom to their appropriate settings. The black slider arrow defines the black point, that is the darkest part of the photo. The white slider defines the white point, the brightest part of the photo that is white. The middle slider adjusts what are called the mid-tones. Drag the outside sliders inward until the are lined up with the edge of the histogram.

Right away the contrast picks because the image didn’t have a very solid white or black point. Next, adjust the middle slider to set the mid-tones of the image. Mid-tones adjusts the overall brightness of the image.

Adjusting Colors Using Levels

You can also adjust the colors of an image using levels. Simply select the Channel option at the top to choose one of the three primary colors. Your choice allows you to either increase or decrease that particular color from the image (sliding either the white point, black point, or mid-tones). If you subtract a particular color, it’s relative secondary color will start to emerge in the image. If ou want to add some yellow to your image, you would subtract blue. Set the channel to blue, and slide the black slider inward.

Variations

Variations is another way to adjust the levels of a photo. It’s much less precise, but sometimes its all you need. Variations presents you with a window dialogue that shows several copies of your image.

Auto Corrections Video

Correction and Adjustments in Photoshop Video

Using Adjustment Layers Video


Dodging and Burning

Dodging and burning refers to “lightening” and “darkening” portions of the photograph.  The dodge tools looks like a black lollipop while the burning tool looks like a hand forming a circle. When you select the dodge or burn tools, the option bar at the top will give you a new set of parameters to adjust the tool’s usage.

Option bar for dodge and burn tool in photoshop

Adjust these settings so that you only change the photo in small increments so that nothing stands out too quickly. Use the exposure setting to adjust the amount of dodging or burning that occurs with each pass. The range will specify the range of tones that will be affected. You want to lighten highlights and darken shadows. If your goal is to brighten shadows or darken highlights, then use the mid-tones setting. The brush size will specify the size of the tool you will be using.

Brush size in photoshopThe master diameter is the size of what Photoshop calls the “brush” size.  The hardness refers to how soft the brush’s edges are. When using dodging or burning, you want a low hardness setting to offer the softest brush. If you are trying to be more exact, you can increase the brush hardness, but increase the chance that the touch-up will be noticeable.


Sharpen

Sharpening increases the contrast of edges found in the photograph, giving the appearance of a sharper or clearer photograph.Note that using the sharpening filter cannot make an out-of-focus photo, into a sharp, or in-focus photo.


Adjustment Layers

When you open an image  background layer is your primary layer. Adding additional layers allows you add elements (contained within those layers) to your image. This allows you to add additional information to your document without affecting the other layers. Each layer is superimposed over the other and can be modified without affecting the other layers.

To add a new layer, click on the layer icon located at the bottom of the layers palette. Rename your layers by double clicking on it and typing the new layer name. Once you added a new layer, now it’s time to add information to that layer.

Here’s a quick step by step on how to add text to an image.

  1. Create a new layer
  2. Rename your new layer “Text”,  indicating that the layer will contain text.
  3. Select the text tool.
  4. Click on the image and the text box will appear.
  5. Type in your text and click OK.
  6. To position the text, select the move tool and drag your text.
  7. Your text is now on a separate layer you can manipulate it without affecting the original image.

Flattening/Saving Images 

Once you’ve finished manipulating your image, you’ll need to save them. There are two ways I recommend saving images. First, save a copy of the image that retains the individual layers. To do that, you’ll need to save it as a PSD file. Saving a copy of the image as a PSD fil, you’ll retain the individual layers which allows you to reopen the image in Photoshop and manipulate those layers at a later time. To save your image as a PSD file, go to File, Save As and make sure you save click PSD.

Note that once you flatten the image, the individual layers will no longer be available. All of the layers will be flattened into one layer. This will prevent you from manipulating any of the data. For example you will no longer be able to move the text around.

If you want to use your image on the Web, you need to flatten the image so that it consists of only one layer which consists of all the data from each of the layers. You to flatten the image first, and save a copy of your image as a .jpg, .gif or .png file. Note that once you flatten the image, you won’t be able to manipulate the individual layers. All of the layers will be flattened into one layer.

Step 1: Go to the Layer menu and select Flatten Image.

Step 2: Go to File, Save As and save the image as a JPG or whatever format you choose.

Using the Panels

To reset panels: Window > Wordspace > Reset Essentials

Choosing Other Panels

History Panel: The History panel allows you to undo and redo steps up to 20 steps.

Click on the History panel. If you can’t find it choose Window > History

Click back on the various history states to see how your steps are undone.

Expanding and Collapsing Your Panels

To bring back your workspace to its original configuration: Window > Workspace > Reset Essential.

Collapse groups of panels by double-clicking the dark gray bar (title bar) at the top of the panels. Double-click it to reopen.

If the History panel is no longer open, click the icon for the History panel.

Click the double-arrow in the upper-right to collapse the panel back to an icon.


Hidden Tools

Some of the tools in the Tools panel display a small triangle at the bottom-right corner; this indicates there are additional tools hidden under the tool.


PSD vs JPG vs GIF vs PNG

PSD preserves all the layers in your file. You should ALWAYS save a copy of your image as a PSD. Once you’ve done that, then consider which file format below best fits your needs.

Image File Formats: There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way.

Jpeg
Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.

Gif
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.

Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.

Image Size
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.

File Size refers to the amount of disk space an image occupies (in KB or MB)
Image Dimensions refers to the physical size of the image, expressed in height and width.

Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.

Compression

Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.

Saving

Click the Save button to save your image. ALWAYS ave your original photo for archiving, or if you intend to reopen it later PRIOR to using the save for web.


Save and Export

There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.

1) Save as: I recommend saving the file type as a Photoshop or .PSD file, which will also save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. Saving as a .jpg, .png or .gif compresses the photo allowing you to use it on the web.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web.  The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.


New Documents


TUTORIALS

  • ASSIGNMENT | ACCESSING TOOLS #1

Download the attached zip file which includes PSD files for this accessing tools assignment here.

  1. Select the Brush tool. By default, your brush tool is loaded with black paint.
  2. Click once on the foreground color to open the pick so you can select a different color in you foreground.Select a blue color to use to brighten up the sky.
  3. Click on the Brush Preset Picker to see your option for size and hardness.
  4. Click and drag the size slider, to the right until you reach 100px. Make sure the Hardness slider is at 0%. You’ve just changed the brush to a large soft brush that will blend well with the edges of the strokes.
  5. Click and drag anywhere on the image one time to create a brush stroke across the image. Click Command Z to undo.
  6. Click and hold the Painting Mode drop-down menu and select Color from the bottom of the list.
  7. Click the arrow to the right of the Opacity option to see the slider Change Opacity to 20%.
  8. Click and drag on the upper right corner of the image. You’ll be brightening the sky.
  9. Note: You can build up color by releasing the paint brush and painting over the same area.
  • Save image 1 with new filename.
  • Example: 2014_Smith_John_AccessingTools_v1

  • ASSIGNMENT | BRUSH TOOLS #2
  1. With the car photo still open:
  2. Select the Brush tool.
  3. Click the Swatches tab.
  4. Click the color calle Pure Red Orange.
  5. With the Brush tool selected, start painting in the upper-left part of the image, adding orange to the sky.
  6. Paint the sky until the orange blends in.
  • Save image II with new filename.
  • Example: 2014_Smith_John_BrushTools_v1

  • ASSIGNMENT  | HIDDEN TOOLS #3

  1. Click and hold on the Brush tool to see the hidden Pencil, Color Replacement and Mixer brush tools.
  2. Select the Mixer Brush Tool and release. The Color Mixer tool is now the visible tool. The Mixer Brush simulates realistic painting techniques.
  3. Change the foreground color at the bottom of the Tools panel. The Color Picker appears.
  4. Position your cursor on the Color Slider and click and drag until shades of orange appear in the Color Panel.
  5. Click once in the Color Pane to select and orange color or type in the RGB: R:235 G:169 B:24.
  6. Click on the Brush Preset picker button in the Options bar and set the following attributes for the Mixer Brush tool.
  • Size: 175 px
  • Hardness: 20%
  1. Click once on the Useful mixer brush combinations drop-down menu and select the Moist, Light Mix preset.
  2. Press Command+0. (This is the keyboard shortcut for Fit on Screen.
  3. With the Mixer Brush tool still selected, start painting in the upper-left areas of the image to create a shade of orange blending in from the corner.
  4. Repeat this for all four corners in the image.
  • Save image III with new filename.
  • Example: 2014_10.20.Smith_John_HiddenTools_v1

  • ASSIGNMENT | COMPOSITE #4

Download the attached zip file which includes PSD files for this composite assignment here.

  1. Watch the video below that describes how to create a composite photo and recreate the barn/chicken/cow image.
  2. Using the farm image, try adjusting the stacking order of the layers in the composite image
  3. Scale and move the layers to place the cow and rooster in different positions.
  4. Add your own images to the composition, adjusting their position and scaling.
  5. Save the images as JPEG files using the different compression options and presets to determine the impact these have on quality and file size.
You should end up with a total of FIVE different images. Upload them to your Flickr site and label them:
YYYY_MM_DD _YourName_Farm_01
YYYY_MM_DD _YourName_Farm_02
YYYY_MM_DD _YourName_Farm_03
YYYY_MM_DD _YourName_Farm_04
YYYY_MM_DD _YourName_Farm_05

Tag your images in Flickr with the following tag:

msuadobecreativesuite2015-01 AS WELL AS add additional tags. 


  • ASSIGNMENT  |  PHOTO COMPOSITION #5

Experimenting with New Vector Capabilities

  1. Open file: ps0101.psd – image of a skier
  2. Save it as: ps0101_work and choose Photoshop format
  3. Select the Rectangle tool – click and drag to create a large rectangle that covers the right half of the image. (You’ll notice a Rectangle 1 vector layer has been added in the Layers panel)
  4. With the Rectangle 1 vector layer active, click Fill in the Options bar, and then click the Pattern button.
  5. Select Grey Granite as the pattern.
  6. Click and hold the Rectangle tool and select the hidden Custom Shape tool.
  7. Click the arrow in the Shape drop-down menu to see default shapes.
  8. Click the gear icon and select Nature category.
  9. Choose Append – Select the Snowflake shape – Click on the Path operations – select Subtract Front Shape.
  10. Position mouse in the middle of the left side of the Rectangle shape and press and hold the Option key. Click and create to create a large snowflake.
  11. Click the Path Selection tool to reposition.
Continue with the following:
  1. Adding a mask to a Vector layer
  2. Using the new brush tips
Adding strokes to vector images
Cloning your new snowflake
Adding text layers from another document

  •  ASSIGNMENT | COMPOSITE #6

Variations on the ski project.

Use the PSD file from composite assignment v1 above and change the pattern from grey granite to the selection of your choice. Change the nature shape in the first version to a shape of your choice. Change brush tip, gradient, font, color, size of the text and anything else you want to make it look different. When you finish, save the file as follows: 2014.10.Smith_John_Composite_v2


  •  ASSIGNMENT | MAKING THE BEST SELECTIONS #7

Download all project zip files below. Unzip the files and place all files in one folder on your desktop.

PS04_01  PS04_02 PS05_03 PS04_04 PS04_05 PS04_06 PS04_07 PS04_08 PS04_09


When you finish, save the file as follows: 2014.10.20.Smith_John_Selections


Making the Best Selections

  •  ASSIGNMENT | Marquee Tool #8

Open image ps0501 here. Open image ps0501_done here.

Use the image above to create an overlay with text.

  1. Select the Rectangualr Marquee tool, (the square with the dashed lines). Choose View > Snap and make sure it’s checked.
  2. Position your cursor in the upper-left side of the guide in the care image, and drag a rectangular selection down toward the lower-right corner of the guide. A rectangular selection appears as ou drag, and it stays active when you release the mouse. You’ll now apply an adjustment layer to lighten just the selected area of the image. You are lightening this region so that a text overlay can be placed over that part of the image.
  3. If the Adjustments panel is not visible, choose Window > Adjustments and click on the Curves icon;the Properties panel appears. (Click on the Curves button to create a new Curves adjustment layer.)
  4. Click and drag the upper-right anchor point (shadow) straight down, keeping it flush with the right side of the curve window, until the Output text field. The rectangular selection in the image is lightened to about 20% of it’s original value.
  5. Go back to the Layers panel, click the box to the left of the text layer named poster text; the Visibility icon (the eye) appears, and the layer is now visible. The text appears over the lightened area.
  6. Save your file and name it as follows: 2014.10.20.Smith_John_Text_MarqueeTool
  7. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a Square Selection #9
  1. Click on the image background in layers.
  1. Select the Rectangle tool.
  2. Click and drag while holding the Shift key  to create a constrained square.
  3. Let go of the mouse and see the square. Notice the dotted lines. This means you can move the square around.
  4. Click on the Curves icon and change the opacity.
  5. Click on the Selection tool and position the cursor over the selection region. Now you’ll notice a scissors appears. This means that if you move the selection, it will cut out a portion of the photo. The pixels will be deleted.
  6. Press Command Z to undo.
  7. Reselect the square, then choose Image > Adjustments > Hue/Saturation. Click and drag the Hue sliders to cange the color of the selection region.
  8. Add text.
  9. Save your file and name it as follows: 2014.10.20.Smith_John_Text_MarqueeToolSquare
  10. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a selection from a center point #10 
  1. Select the Background layer in the Layers panel, then click and hold the Rectangular Marquee too and select the hidden Elliptical Marquee tool.
  1. Draw a circle selection from the center of the image.
  2. Place your cursor in the center of the tire, and hold down the Option and Shift key.
  3. Click and drag to pull a circular selection from the center origin point.
  4. Release the mouse.
  1. If you need to nudge the circle around, use the up/down, left/right arrows.
  1. Click Select > Transform Selection. You’ll see a bounding box appear around your selection Use the bounding box’s points to adjust the size and proportion. Note: To scale proportionally, hold down the Shift key when transforming. Press the Enter key to accept changes.
  1. Follow the directions from in-class exercise #1 starting at no. 3 to add the opacity and then the text.
  2. Save your file and name it as follows: 2014.10.20.Smith_John_Text_MarqueeTool_CenterPoint
  1. Upload to your blog and Flickr and save your .psd file.

 ASSIGNMENT | Changing a selection into a layer #11
By moving a selection to its own independent layer, you can have more control over the selected region while leaving the original image data intact.
  1. Make sure the Background layer is selected.
  2. Select the tire with the Ellipse tool holding down Option/Shift.
  3. Press the Command and J key to create a new layer. You’ll then see the new layer in your layers panel.
  4. Apply a filter: Choose Filter > Blur > Motion Blur. You’ll see a dialog box.
  5. Type 0 in the Angle text field and 45 in the Distance text field and press OK. You’ll see the motion blur applied.
  6. Save your file and name it as follows: 2014.10.20.Smith_John_Text_MarqueeTool_ChangingLayer
  7. Upload to your blog and Flickr and save your .psd file.

Homework | Week 7  
  • Complete all assignments listed in this class post.
  1. Homework 2: Delicious:  Tag three sites that focus on Photoshop and any of the items we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class.
  • Homework 2: | Tutorials
Finish all tutorials.
  .

PROJECT 2 IS DUE ON WEEK 7 THURSDAY AT THE BEGINNING OF CLASS  

Project Submission and Printout:

The final INFOGRAPHIC RESUME must be printed in color, and at full size – 11″X17″. Design should also be uploaded to your Flickr, copy the image URL, add media and insert it onto you project 2 page o your website. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester.

Word document, research, sketches, design iterations and final design in the following formats: .ai, .jpg and .doc should be UPLOADED TO DROPBOX and labeled as follows: Last Name_First Name_Date_Project II_Illustrator_Infographic.

The design will be turned in via DropBox as a Adobe Illustrator file, a .jpg file as well as printed in color. The written description and research for the project in Microsoft Word will be turned in .doc format and the project sketches will be turned in .jpg format. ALL project files should be on BOTH your Illustrator Project II page as well as DropBox. ALL research, inspiration, low and high fidelity sketches, Illustrator v1 and v2 should be completed. They should all be linked to your project II page.

Items That Must Be Physically Turned In On Week 8 at the BEGINNING of class:

  • Inforgraphic Resume printed at 11″x17″ and in color.
  • Paper print out of the project written description.
  • All .ai, .jpg and .doc files UPLOADED TO DROPBOX.
  • A link to BOTH your Illustrator Project II DropBox folder AND your Project II page.
  • Written Description – 600 word minimum.