Skinning is the ability to change the visual appearance of this site. It allows the core set of graphic elements to be replaced with another set. These elements include the section headers, background image, and some decorative graphics. It does not affect images that are a part of event or feature postings. Likewise, it does not change the underlying grid and content layout.
A skin can be subtle or bold. It can make clear the site's structure and information - or it can cause the site to feel abstract and fuzzy. It's all up to the skin designer. Look at the existing skins with the Skin Switcher. You'll get an idea of the possibilities.
We invite all AIGA Los Angeles members to create skins for this website. But...
Before You Start
We recommend that you contact us before starting to design a skin. Due to the amount of work involved for the Online Committee to take a submitted skin and make it available on the website, we can not guarantee that a submitted skin will be accepted. Note that to submit a skin you must be an AIGA Los Angeles member.
Accepted skins may be installed as the site's "default" skin, they may override the user's existing skin selection, or they may be placed in (or removed from) the Skin Switcher without any additional notification to website visitors, or the skin's designer. This will be determined, in part, by the Online Committee and its current editorial objectives.
The Steps
The following are the steps involved in creating a skin for this website.
Download the set of template files (available as either a .sit or .zip archive). This is a collection of .psd files which you will use to create the different skin elements required.
Look at what you've got. Examine the template files and the website to get a feel for the design task ahead.
The template files are those used for the skin "Demo 1." To switch to "Demo 1" right now click here and this page will reload with it active.
In general, template elements whose names begin "skh_" are header elements, and those with names beginning with "sk_" are decorative elements. Header elements appear at the tops of content areas - and function as labels for each section. Decorative elements are used for visual fun and variety throughout the site. Notice that, except on the home page, there is just one header element per page, and that different decorative elements are used on different pages.
The best way to see which specific skin elements are used on a page is to use one of the "demo skins." The demo skin elements include their names, so you can easily see where each element appears.
Browse around the website to get a feel for what changes from page-to-page. You'll notice: sk_1-5 appear at the top of every page; sk_11 is at the bottom of every page; sk_10 appears above all small-width columns (sk_8 and sk_9 are similar but only appear on the home page); sk_13 appears above all skh_ title bars; sk_14 appears on all feature pages and all event detail pages (and some other assorted pages); sk_12 is on the event section home page (and some other assorted pages); sk_7 and sk_7 appear only on the home page. And, finally, sk_sign is the signature box that appears on every page - a place for the designer to sign their creation.
As you think about your design consider that somewhere you must include the text "Los Angeles" - to identify the site as that of the Los Angeles chapter. This must be done on one (or more) of the skin elements that are visible at the top of all pages. (These are sk_1, sk_2, sk_3, sk_4 and sk_5.)
Skin elements can be invisible. If you want a skin element to disappear (ie. not be used in your design) - let us know when you send us your files. We'll replace that element with a transparent gif.
The design also can specify a highlight color. This is the color used when you rollover a link, on the main menu to indicate the current section, and as a highlight color throughout the site. Send us the RGB color you want as your design's highlight color.
In Photoshop, edit each of the template files, and create your designs. (This is the fun creative step.)
As you work on your designs, keep in mind that we want to the final file sizes to be relatively small. This means that large, complex graphics, unless highly compressed (and thus lower visual quality) aren't ideal. For the smaller skin elements, this is less of an issue than for the sk_bg element.
The sk_bg element is for the page background. This element can be as large (width/height) as you'd like -- it will be automatically tiled to fit the visitor's browser window. (So, you may resize this element's template file to whatever size your design requires.) But: this is the most important element to maintain a small file size - so, try not to make it too complex.
Except for the sk_bg element, do not resize any of the template files. They must keep their size and resolution as specified.
Skin elements can have transparency. Transparent areas reveal the background through their holes. Elements with transparency will need to be saved as gif files (in the next phase below).
Once you have designed all of your elements, you need to save each of them in a web format - gif or jpeg. For each file:
In Photoshop, choose "Save for Web..." from the File menu.
Use the settings controls on the right side to choose between gif/jpeg. In general, gif is good for images with line art and areas of solid color; jpeg is good for photographic-types of images.
As you adjust the settings notice 1) the quality of the image that you see and 2) the output file size (shown in the lower left corner). You want to find a reasonable balance between quality and size.
While there will certainly be exceptions, as a general rule of thumb, each image shouldn't be larger than 2-4K. The sk_bg element shouldn't be much larger than 20-25K, and the total size of all your elements combined shouldn't be around 50-80K.
Save the image - make sure to save it as .gif of .jpg - and to not overwrite your .psd file.
If you have no idea what the above means, let us know. We may let you just send in the .psd files.
Email us all of your files (psd, jpg, gif) and your design's "highlight color."
Once you send in your images, we will assemble them into something you can review online. After that - you may want to make some changes to your design, and send updated versions of the files.
