Photoshop Fundamentals Exercise 2
Creating Professional Looking Interface Elements

For this assignment you should use the stack you created for the previous photoshop assignment. Turn them both in as a single stack.

1. Create a background image for a hypothetical LiveCode stack. You should include the following elements:
   • Include a photograph or other image to serve as "wallpaper" or backdrop of your stack. You may want to subdue the image—with transparency or a color overlay—so that it doesn't overwhelm the content of your stack.
   • Use shapes to define areas of your stack layout. For example, you may want to frame your content area, or create visual spaces for groups of fields or buttons. Your imagination (and an awareness of good design practices) is your limit.
   • Include some text that identifies the stack's title or purpose. Use Photoshop's Layer Styles to enhance the readability of the text (using Drop Shadows, e.g.) Save this text as a separate file with transparency preserved. (NOTE: When I showed this in class, I kept the title as part of the background image. However, it is a good idea to save it as a separate image file, because that will allow you to position the title text more exactly in your stack.)
   
   
2. Create a set of icons for two buttons. They can be Previous and Next buttons, Return to menu buttons, whatever you want. You should create 4 different icon states for each button:
   • normal (up)
   • hilite (down)
   • disabled
   • hover
   
   
3. Import the background frame, title and button icons into the stack you created for the previous assignment.


4. Make the frame and title into a group that will appear in the background of each card.


5. Hide the button icon images and assign them as icons to two buttons, using the button states as appropriate.

Turn your completed, combined stack in by next class period.

Steps and Settings used in the in-class example.

Creating the Photoshop project document

1. Create New Document: File > New
   Name: As desired; eg., "PlanetsBG"
   Width: the width you want your stack to be (eg., 1024)
   Height: the height you want your stack to be (eg. 768)
   Resolution: 72
   Color Mode: RGB 8 bit
   Background: Transparent
   


2. Rename the first layer. The document will be created with single layer. Rename the Layer 1 in layers palette to something like "color fill". Leave empty for now.


3. Copy the planets image into the BG image.
   Open the file planets.jpg. Copy the planets image and paste it into the PlanetsBG document. You can just Select All in the planets.jpg document, then use the Move tool to drag it over. But that leaves very sharp lines at edges. If you want to dissolve the background image into nothing, try select with feathering:
1. In planets.jpg: Choose Marquee tool (image should still be selected.)
2. Get rid of the selection (Select > Deselect — Cmd+D)
3. In toolbar in Feather box: 20 px
4. Drag mouse to select all. Note rounded corners.
5. We only want right edge to be feathered, so let's make the selection larger. Resize window so it has blank space around the image.
6. Select > Transform Selection, then drag the selection so the marquee is well outside the image on the left, top and bottom. Drag right edge so the resize line is just over the edge of the image. Press Return to accept the changed selection.
7. Copy the selection.
8. Switch to planetsBG document, undo previous paste in the History window, then create a new layer, named "planets-feathered". Now paste the planets image. Notice the right edge "dissolves" away rather than being sharp line.


4. Create a solid color background fill.
   If you opt to use the feathered edge technique above, you may wish to also create a colored backdrop that will create the illusion of the photo fading into a color rather than a white background. You can do it like this:
   
   Method 1: Create a solid color-filled layer above the image.
   1. In main document, make the bottom layer active and choose the fill (bucket) tool. Click the foreground color rectangle to bring up color selector.
   2. Move the cursor over the right edge of the image. Note that the cursor turns to an eyedropper. Choose a color close to the edge of the image that will blend well into the background.
   3. Making sure the bottom ("color fill") layer is selected, click with the fill tool in the blank space. The bottom layer should be entirely filled with the color you chose.
   
   Method 2: Use the Color Overlay effect in layer effects.
   1. Double-click on the image in the Layers palette.
   2. Click on Color Overlay.
   3. Select the color desired from the color picker.
   4. Set the blend level of the effect to an appropriate value.

Blend Mode: Normal
Layer Opacity: 20% (experiment until you get a look that you like)

You can also choose to subdue the image by applying a color overlay as a layer style:
Layer Styles for image:
Color Overlay
Color: R-0, G-56, B-240
Blend Mode: Normal
Opacity 36%

Marquee Tool - Rectangle
Select All
Edit > Stroke...
10 pixels
Inside
Color: R-50 G-56 B-111
Opacity 75%
Layer Styles:
Bevel and Emboss
Outer Bevel
Smooth
Up
Size 5
Soften 0
Angle 120°

Shape Tool - Rounded Rect with 4px radius
Fill pixels mode
Color: R-240 G-255 B-0
Layer Opacity 36%
Layer Styles:
Bevel and Emboss
Outer Bevel
Smooth
Down
Size 5
Soften 0%
Angle 120°

Save for Web (note how size updates to show effects of different settings)
JPEG
Maximum
Quality, 100%

(Downloaded free font called Sci Fied X BoldItalic.ttf from http://www.webpagepublicity.com/free-fonts.html. Win TTF fonts work fine on OSX. To install, quit all apps you want to have access to the font, drag the font to ~/Library/Fonts. Now restart apps to force them to read new fonts.)
Title Layer
Choose font
Font size 36
Antialias: Strong
Left justify
Color: R-13 G-62 B-143
Layer Styles:
Drop Shadow
Blend Mode: Multiply
Opacity 50% (to tone down the shadow a bit)
Angle 120°
Bevel and Emboss
Inner Bevel (makes the layer seem more its own thing instead of integrated with others.)
Smooth
Up
Size 5
Soften 0
Angle 120°
Instead of Saving the title as part of the background, save it separately so we have more flexibility in LiveCode as to placement. But we want to preserve drop shadow transparency, so...
Use marquee or crop tool to crop title to smaller size (don't worry, we can undo it later.)
Hide all other layers.
Save for Web
PNG-24 with Transparency

Create new document - NavBtns
48 X 48
RGB 8 bit
Transparent BG

Choose the Text Tool
Use font Webdings 3
48point
Color, same as title

In this font:
• Right curly brace key ( } ) produces right-facing triangle arrow: ▶
• Vertical line key ( | ) produces left-facing triangle arrow: ◀

For Disabled icon:
Layer Style:
Color fill - choose a medium gray color
Hide Bevel and Emboss style in layer palette

For Hover icon:
Duplicate arrow layer
Change text color to a lighter shade of the same color, eg. R-24 G-111 B-255
Hide normal icon layer

Save for web.
PNG-24 with Transparency