GWDA223 Intermediate Web Page Scripting :: Art Institute

Week 4: Color & Pattern

Student Showcase

We will take a look at any of your new work which is ready to share.

  • Wireframes
  • Site Map
  • Mood Board
  • Storyboard

Color

Color has a powerful impact on your site's visitors. Your goal is to find or create a harmonious color palette to use consistently throughout your site. You can use a tool like Kuler to create a color palette, and obtain the hex values of the colors in the palette.

The Photoshop Kuler Panel

Photoshop CS4 comes with a special panel called Kuler. It's a great tool for developing color schemes (or making use of great color schemes created by the Kuler community. You can find this panel under Window > Extensions > Kuler.

Browsing Color Themes
  1. Click on the Browse tab.
  2. Browse and search thousands of tagged and rated themes on Kuler.
    • You can search for keywords.
    • You can sort by Highest Rated, Newest, Random, and more.
    • You can filter by how recently the theme was added.
  3. Hover over a theme to view its rating, author, and date of creation.
  4. Click on a theme to select it.
  5. Click on the black triangle on the right of the theme to access its menu:
    • Edit This Theme
    • Add to Swatches Panel
    • View Online in kuler
kuler panelEdit a Theme
  1. Once you’ve selected Edit This Theme, the Create window opens.
  2. You can edit many aspects of a color theme here.
Create a Theme
  1. In the Create window, you can edit many aspects of a color theme. Start by selecting a Harmony Rule.
    • Experiment with moving the control points on the color wheel.
    • Select a new Base Color.
    • Directly input the RGB or hexadecimal value for any color.
  2. Options for saving a color theme:
    • Add the five theme colors to your Swatches panel.
    • Upload your new theme to kuler.adobe.com.
    • Save the theme. You can access your saved themes via the Kuler panel's Browse window

Exercise: Use Kuler to Create a Color Scheme from an Image

  1. Obtain a photographic image that contains colors that appeal to you and which are appropriate for your website look and feel.
  2. Save the photo image file in a folder named kuler.
  3. Go to kuler.adobe.com.
    1. Login or create an account.
    2. Click Create on the left.
    3. Click From an Image on the left.
    4. Click Upload under the default photo.
    5. Navigate to the image on your computer and click OK. The image will appear on the web page.
    6. Move the five bull's eye shapes around on the image to pinpoint the colors you want. The colors will appear as large swatches under your image.
    7. Be sure to pick a couple of lighter colors and a couple of darker colors, so that you have contrast.
    8. Decide whether to make this color scheme Private or Public, and give your scheme a name.
    9. Click Save.
    10. Click the icon for downloading the Adobe Swatch Exchange file. It looks like a pieace of paper with a down-facing arrow.
    11. Save your .ase file into your kuler folder.

kuler rooster

kuler rooster

  1. In Photoshop:
    1. Open the Swatches panel.
    2. From the panel's menu, select Load Swatches...
    3. For Files of Type, select Swatch Exchange (*.ASE).
    4. Navigate to the .ase file you downloaded from Kuler, and click OK. Your colors will appear at the bottom of the swatches panel.
    5. In the Swatches panel, hover over one of your five new colors to see the hexidecimal value pop up (when working on a website design, double-click on the color to open the Color Swatch Name dialog box; this will allow you to copy the hex value to the clipboard (Ctrl+C) for use in your CSS.)
    6. Create a new document.
    7. Make a simple design using your five colors selected in Kuler.
    8. Save the file as color-scheme.psd inside your kuler folder.
    9. ZIP up the kuler folder and upload it to the portal.
Notes
  • Prior to loading these swatches, you may want to clear out all the other swatches first. You can achieve this by selecting Replace Colors... instead of Load Colors...
  • You can load this .ase file into Illustrator as well.
  • Yes, you do much the same thing in Photoshop directly, but this technique allows you to see all your selected colors at once in a palette under your image.

Textures

Texture means the feel, appearance, or consistency of a surface or a substance. In visual design, it refers to an area that has the illusion of a tactile quality of some kind—like you can imagine how it would feel to touch it.

Finding Textures

CG Textures

TextureKing

Brusheezy.com/Textures/

Mayang.com

Creating Textures in Photoshop

Good Tutorials - Textures

Photoshop Road Map - Textures and Patterns Tutorials

A Better Method for Adding Texture

Photoshop’s Built-In Actions: Textures

Pattern

Pattern means a theme of recurring events or objects. In visual design, the term refers to a repeating collection of colors, lines, shapes and/or forms. The repetition tends to be regular.

Photoshop Brushes and Patterns Online

Squidfingers Patterns

Subtle Patterns

Brusheezy.com/Brushes/

Brusheezy.com/Patterns/

ColourLovers Patterns

Obtaining a Background Pattern from ColourLovers:

  • Use Firefox to locate the page for the individual pattern you want to use.
  • Click on the thumbnail image of the pattern to view the pattern within a large window.
  • Right-click on the pattern and select View Background Image.
  • Right-click on the pattern image and select Save Image As...
  • Navigate to where you want to save the image, rename it if you like (but leave the file extension as .png,) and click Save,

Installing Photoshop Brushes

When you find a set of Photoshop brushes online you like, it's pretty easy to make them available through your copy of Photoshop. Just do this:

  1. Download the brush set file, which will typically be a ZIP file.
  2. Extract the ZIP file and make note of where the extracted .ABR file ended up, as well as the file name.
  3. Move or copy the .ABR file to the following location:
    • PC: Navigate to My Computer > C:\Program Files\Adobe\Adobe Photoshop CS_\Presets\Brushes\
    • Mac: Press Cmd and click on the Photoshop icon from the dock. You will be instantly taken to the applications folder in Finder with Photoshop CS_ selected. Navigate to Presets and then Brushes.
  4. Open or return to Photoshop.
  5. Open the Brushes panel (Window > Brushes.)
  6. In the panel's menu, select Load Brushes...
  7. Navigate to the Brushes folder where you saved the .ABR file, and select your file.
  8. You should see the new set of brushes added to the bottom of the brush display.

Creating Custom Brushes in Photoshop

Designing Your Own

Exercise: Create a Pattern from an Image

How to create a seamless background tile from an image.

Choose an Image
  1. Find a largish image to work with. The larger is it, the easier it will be to work with.
  2. Images that already have lots of repeating shapes/forms are best to use for repeating tiles.
  3. Avoid images with a drastic change in value (darks and lights); the overall value should be even from top to bottom and side to side.
  4. You can practice with this pebble image, or locate your own.
Duplicate
  1. Open the image in Photoshop.
  2. If your image started as a GIF file, first change it to RGB (Image > Mode > RGB).
  3. Duplicate the image (Image > Duplicate).
  4. Arrange the two images side-by-side (Window > Arrange > Tile). Your original image should appear on the left side of the screen, and the duplicate on the right.
  5. Save your duplicate as a PSD file called background-tile.psd.
Offset
  1. Make sure your duplicate PSD is the active file.
  2. Find out the image dimensions (width and height.) You can do this using Image Size (Image > Image Size). My pebble image is 426px wide by 401px tall.
  3. Run the Offset filter (Filter > Other > Offset).
  4. Enter half your image's width in the Horizontal field. Enter half your image's height in the Vertical field. Make sure that under Undefined Areas, the radio button is set to Wrap Around. Click OK.
Repair the Seam
  1. The Offset filter moved your image and wrapped it around so that you can see the seams to be repaired. Your job is to cover these seams and end up with a flawless repeating image.
  2. Go back to your original image on the left. Using some sort of selection tool (I prefer the pen tool,) select an object. Copy it to its own layer (Ctrl+J).
  3. Select a few more objects of varying size and texture/color. Use shapes that can be seen in their entirety. Save each to its own layer. This step will take the most time.
  4. Now one at a time, move an object from the left-hand image over to the right-hand image. Place the objects loosely over the seams, overlapping them and hiding the seams. It's okay to use an object more than once, especially if you resize or rotate/flip it.Don't push any objects outside of the image frame.
  5. Note: For patterns that don't have objects within them (such as a wrinkled paper texture), erase the seam loosely with a soft-edged eraser, then clone in soft-edged (feathered) pieces from the original image.
Save and Test Your Tile
  1. Save the tile image for web (File > Save for Web and Devices). Reduce the image size if you like. Choose the best file type for your tile image: JPG, GIF, or PNG.
  2. Open the web image you just saved. Create a pattern from it (Edit > Define Pattern).
  3. Create a new 3000px by 3000px document (or big enough for your pattern to repeat a few times in each direction.)
  4. Fill the new document with the pattern: Edit > Fill, Use: Pattern, select your new pattern from the dropdown.
  5. Save the new document as test-pattern.psd.
Student Samples

seamless background sample 1seamless background sample 2
seamless background sample 3seamless background sample 4

Making a Favicon

How do you get that special little icon to appear when your website loads? For starters, you need your own domain name and a method to upload files to your web host (FTP via Dreamweaver is best).

favicon example

  1. Create a 16px by 16px icon in Photoshop.
    1. The simpler, the better—you only have 256 pixels to work with.
    2. You might start with a larger square image and reduce it using Image > Image Size.
    3. Alternately, you can start with a 16x16 document and draw something from scratch.
    4. Check to see that it really looks how you want it to at 100% zoom.
    5. Transparent backgrounds work best for objects on a blank field, in case the browser address bar has a gradient (as it does in Firefox). It may still show a small white fringe.
    6. File > Save for Web and Devices, then save it as a GIF or PNG.
  2. Upload the file to favicon.cc. Select Keep Dimensions.
  3. Click on Download Icon. Save the file into your root folder.
  4. Upload the file to your server.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
4 Kuler Design kuler.zip
Background Tile background-tile.psd
test-pattern.psd
MIDTERM PROJECT midterm.zip

Assignment Details

Kuler

Complete the activity described to the left under "Exercise: Use Kuler to Create a Color Scheme from an Image."

Background Tile

Complete the activity described to the left under "Exercise: Create a Pattern from an Image."