close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

CSS Designer Starter Kit for Photoshop

Tutorial created by Ray Borduin, WebAssist

Categories: CSS, Design

rating
1 ratings | Sign in to rate this tutorial | View comments

Learn how to look at your Photoshop comps with CSS-based layouts in mind; then follow step-by-step instructions for converting a graphic comp to a CSS-based layout. The CSS Designer Starter Kit is a 5-part interactive video tutorial. Learn at your own pace and watch unlimited times.

This tutorial includes a sample graphic comp with completed HTML and CSS layout plus a bonus graphic comp.

next sectionarrow down
arrow downTraining Topics

The CSS Designer Starter Kit for Photoshop covers the following training topics:

  1. Learn how to visualize CSS layouts.
  2. Slice and export graphic methods from Photoshop.
  3. Export faux column graphics from Photoshop.
  4. Detailed CSS layout instructions in Dreamweaver.
  5. CSS float property explained.
  6. Core CSS layout technique detailed.
  7. Multiple column method described.
  8. Equal column lengths explained.

next sectionarrow down
arrow downRequirements

You will need the following in order to fully utilize the CSS Starter Kit for Photoshop tutorial.

  1. Adobe Flash Player 7 or higher.
  2. Photoshop CS3 or higher.
  3. Windows or Mac platform.
  4. start_here.zip
  5. movies_01.zip
  6. movies_02.zip
  7. movies_03.zip
  8. movies_04.zip
  9. exercise_files.zip
The movie files have been separated into multiple .zip files to resolve bandwidth issues.

next sectionarrow down
arrow downSetting up the movie files

Once you have downloaded all of the movie files, extract the contents of each zip and ensure that the files are stored in the appropriate location.

Step 1: Extract the start_here.zip file

The first step in setting up the movie files is to unpack the start_here.zip file.

  1. Locate the start_here.zip file on your computer.
  2. Extract the file by either right-clicking and selecting 'Extract all' (PC) or double-clicking and have the files automatically extracted (Mac).
    You can also you the compresstion program of your choice. Just make sure the contents are extracted to their own folder.
  3. Locate the newly extracted folder 'start_here'.
  4. Open that folder and look for a subfolder called 'swfs'. That is where the movie files are going to be placed.

Step 2: Extracting the rest of the movie files.

Now you will need the unpack the rest of the movie files. Each 'movies_0*.zip' file contains a portion of the tutorial.

  1. Extract the 'movies_01.zip' file.
  2. Open the extracted 'movies_01' folder.
  3. Select all the .swf files. (Ctrl A for PCs, or Cmd A for Macs).
  4. Copy all the selected files. (Ctrl C for PCs, or Cmd A for Macs).
  5. Locate and open the 'Start_Here/swfs' folder.
  6. Paste the .swf files in that folder. (Ctrl V for PCs, or Cmd V for Macs).


Repeat this process for 'movies_02.zip', 'movies_03.zip', and 'movies_04.zip'.

next sectionarrow down
arrow downExtract the Sample Files

As an optional step, you may unpack the sample files and use the contents when viewing the tutorial. Or, you may also use your own content if you prefer.

  1. Locate the 'exercise_files.zip. file on your computer.
  2. Extract the file by either right-clicking and selecting 'Extract all' (PC) or double-clicking and have the files automatically extracted (Mac).
    You can also you the compresstion program of your choice. Just make sure the contents are extracted to their own folder.
  3. Locate the newly extracted folder 'exercise_files'.

next sectionarrow down
arrow downViewing the training video

Once you have moved all the necessary swf files, view the interactive tutorial by double-clicking the 'index.htm' file located in the main '/start_here/' folder. This will launch the page in your primary browser. The presentations will start immediately. You can jump to any desired topic by clicking its link in the table of contents.

The index.htm file will open in your default browser on your machine. Depending on which browser is set as default, you may encounter some security setting alerts. Simply clicking OK, or choosing Allow Blocked Content will allow you to proceed with the CSS Designer Starter Kit.

arrow downYou might also like

WebAssist has some other products you might be interested in.

  1. Design Extender: a Dreamweaver extension to assist you with designing and creating websites.
  2. Data Bridge: a Dreamweaver extension to assist you with developing database-driven websites.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
1 ratings | Sign in to rate this tutorial

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top