Vous êtes sur la page 1sur 76

���������������������������������������������������������������������������������

���������������
��������������������
������������������������������
���������������������������������������

������ ����� ������ ����� ������ �������



������


������


������


�������

��
�������

��
�������
��������� ��������� ����������� ����������� ����������� �����������
���������������������������������
������������������������������
Cover image done
by Mick Moolhuijsen

From The Editor


Dearest Readers!
You’re connected, you’ve spent a few hours (days) wandering around the net and you’ve determined that you are ready for the plunge.
Where can you go from here?
When you’re fairly new to the Internet, the thought of building a web page seems like a distant dream. If you are new to creating HTML web
pages, and wish to get a more in-depth training experience, this is the next best thing to taking .psd starterkit. Although there are many
sources that contain guides for a wide variety of issues faced by a webmaster, new or old, none of them provide a step by step guide for
getting started with your website. As a result, our authors prepared articles for the newcomers where and how they should start. Having
an encyclopedia in your hands is not much use if you don’t know which articles you should read first, and which next. This issue attempts
to fill in the gaps by providing you an overview to the web creation process from the beginning. Design your web site with fantastic video
training from Stefan Mischook, check CD1.
Ades Tynshev introduces basic features of Photoshop, go to page 12. Second step is to decide what the goal of the page is. Is it a sales page to
promote an affiliate product; a lead capture page to capture subscribers; or a home page? See p.18 CreativePublic web designing lessons article
and feel safe to start with your own project. Presenting useful information in an organized manner is critical to the success of your web site read
great faq p.56 with many tips prepared by Daren Hawes, especially for our readers!
Now when you know what type of page you want, work out the sales copy, content, layout and design.Each design is a new hand of cards.
Not only are the cards we’re holding different every time, but so are the hands of the other players. Our hand is our own knowledge of the
design project, and the hands of the others are the constraints that we must deal with. Designs, when successful, are successful because
they acknowledge and deal with the unique constraints of the project at hand. When not successful, designs usually fail because someone
didn’t fully understand the constraints of the project. It is dangerous to generalize constraints.
With our tutorials written by Nino del Padre p.46, Chris Wizner p.30 and of course our great cover graphic designer Mick Moolhuijsen p.38 it will be
piece of cake for you! This is just the very start of things. You should consider getting extra training to enhance the basic skills that you’ve learnt
(I hope with us) and maybe upgrade your skills as well to build better pages. Good luck though!
As always, I welcome your input, suggestions on how we can make .psd more useful to you, our readers. Please contact me at
ewa.samulska@psdmag.org

Ewa Samulska
contents

on the CD faq
Web Design 1 Top ten best practices
video course 6 Daren Hawes 56
Specials 8

contributors web world


Authors 10 Worldwide Wide Web 58

web design gallery


Introduction to Photoshop
Ades Tynyshev 12 Mick Moolhuijsen web world 64

Database driven websites: what


are they and how are they built?
Stefan Mischook 16 review
CreativePublic Web Designing Books review 68
Lessons Programs review 70
Jason Vaughn 18
Using Graphics for Web Page
Atul Thakur 24 next issue
Screen Recorder Software next issue 3/2007 74
Comes Of Age
Raspal Chima 26
Giggles Nightclub Website
Chris Wizner 30
Web Designing, the Art, Science
& Philosophy
Atul Thakur 34
Mysteries Of The Favicon.ico
Jennifer Apple 36
Website Layout
Mick Moolhuijsen 38
Pattern Background
Mick Moolhuijsen 44
Deconstructing DelPadre.com
Nino Del Padre 46
Uncool is the new cool
TheUncoolhunter Team 50
Interview with 352 Media Group
.psd Team 54

.psd starterkit 2/2007 5


on the CD

CD1
Web Design 1
On this CD you will find a complete, Stefan Mischook's now want to learn what's going on behind the scenes
software training CD that provide a fast, easy, inexpen- for people who want to become much better at using
sive, and highly effective method for computer learning. these programs.
On the .psd CD1 you will find Web Design 1 130 His popular web design video tutorials have taught
minute video course. Learn html and css the easy way thousands, and He is pretty sure they can teach you.
with Stefan Mischook. What's on the Videos:
Web Design 1 is a foundation course designed to teach
total beginners how to design websites from scratch. In- • Build your first web page: basic HTML
stead of a boring lecture, just use a relaxed one-on-one • What is the World Wide Web
teaching style – it's like having a nerd-friend sitting be- • Essential HTML tags
side you, showing you step-by-step. The course moves • Build your website – a step by step guide
along quickly, but it takes our time to explain the im- • HTML tables and Images
portant fundamentals, because once you understand
those key basics, the rest comes easy! Stefan Mischook has been designing web pages since
1994. Over the last 10 years he has worked on web
More details projects of all sizes and types giving him a broad per-
These videos will teach you cutting edge web design. spective on web design. Along with his web design
No fluff, to the point practical training, designed to experience, Stefan is also knowledgeable in many
make a web designer out of you as quickly as possible! programming languages and web technologies in-
Great for total beginners who don't understand any- cluding PHP, JAVA, ASP, ASP.net, SQL, Javascript,
thing about HTML, CSS and web design. VB Script among others.
Web Design 1 is also great for users of Front Page, Do not wait just play the CD!
Dreamweaver or any other web design software, that www.killersites.com

6 .psd starterkit 2/2007


on the CD

CD2
Freebies
AdesClrPicker v1.5
Do you still use Photoshop to capture colors? Now you need to recover intentionally or accidentally deleted pic-
don't have to, because with AdesClrPicker you can do ture should be familiar to most camera owners.
the same much faster. With our small and fast color The list of supported storage media includes but is not
picker tool you don't have to wait for Photoshop to limited to SmartMedia, CompactFlash, Memory Stick,
load just to capture one color from the screen. MicroDrive, xD Picture Card Flash Card, PC Card, Mul-
AdesClrPicker is a very easy to use, yet powerful color timedia Card, Secure Digital Card, and many others. Flash
picker application for Web Designers and Web Devel- File Recovery resurrects images from formatted, damaged,
opers. It allows you to capture colors anywhere on the corrupted (unreadable), or defective storage media.
screen with a single click of the mouse and output it www.panterasoft.com
in either HTML or RGB color codes. Color Library
feature allows you to store your colors, you can access Magic Photo Editor Full verison
them whenever you need them. This is especially useful Magic Photo Editor is an easy-to-use image editing soft-
if you are working on a project that uses specific colors ware. With Magic Photo Editor, you can easily blend
and you have to refer to the color codes often. your digital photo onto another image (a beautiful
www.adesdesign.net landscape image etc) to create special effect. It makes
your photo interesting and pretty. This is the full ver-
BB Flashback Express sion of Magic Photo Editor, which has 200 masks, 60
Everything you need to make great screen recordings! flowers, 120 cartoon pictures, 160 frames. The file size
BB Flashback Express from Blueberry Software is the is 11Mb. Also you can adjust the position and size of
great value screen recorder for Windows that captures every photo or flower, cartoon picture, text comment
everything you do on screen and turns it into captivat- by just clicking and dragging them.
ing movies, quickly and easily! Any question or suggestion, please send email to:
The screen recorder combines ease of use with the most picget@gmail.com or get more information at the website:
sophisticated recording technology around today, mak- http://www.picget.net. Highly recommend to try their an-
ing it a snap for anyone to transform on-screen activity other image editing software: DreamLight Photo Editor. It
into impressive Flash or AVI movies. Create presenta- can easily add many special dream effects onto your photo
tions, tutorials or training videos. FlashBack’s superb Download DreamLight Photo Editor from the website.
capture technology ensures perfect reproduction, so it’s www.picget.net
ideal for professional software demonstrations, too. For
more information read the article Screen Recorder Soft- IISKeeper 1.3 – 90 days trial
ware Comes Of Age. Only here in .psd FlashBack Express Protect site resources with password. If you would like
– for FREE (Normal retail price $39.00 USD) and BB to restrict access to some files and folders on your web
FlashBack – Upgrade Offer price $160.00 USD (Nor- site or place some information inaccessible for the ma-
mal retail price $199.00 USD) jority of users on the site, Metamatica Software offers a
www.bbsoftware.co.uk simple and efficient solution – ISAPI protection filter for
IIS. With IISKeeper you can easily protect any resources
Flash File Recovery 2.1 Tryout of your site with a password. By a protected resource we
Flash File Recovery is a nifty application that every pho- mean a folder containing subfolders and files or a single
tographer should be aware of. Essentially, it can recover any file. You don’t have to create Windows user accounts. The
previously deleted image file. Plus, it is capable of salvaging list of users who have access to the protected resources
pictures from damaged or corrupted flash drives (includ- does not depend on the list of system users.
ing camera's built-in memory) and memory sticks. While For the cookie authorization mode, the distribution
camera or storage media failure is a rather rare event, the package includes templates of input forms where the
user enters username and password. You can easily em-
bed the form into your site.

.psd starterkit 2/2007 7


on the CD

To protect your site, you’ll need but five minutes for in-
stalling and configuring IISKeeper.
www.matematica.com
Registry Booster Trial
Residual files, unused and undeleted drivers, and cor-
rupt or bad entries in registry settings will quickly lit-
ter even the newest of computers. The result? Frequent
error messages, slow start-ups, declining and poor per-
formance and registry integrity, unstable and frequent
application errors and crashes, and, at times, even an
inability to start Windows.
Registry Booster is the safest and most trusted solution
to clean and optimise your system, free it from registry
errors and fragmented entries. Through Advanced Er-
ror Detection Technology, Registry Booster automati-
cally identifies missing, corrupt, or invalid items in your
Windows registry and dramatically enhances perform-
ance and general stability.
One mouse click and Registry Booster does the rest.
And, using Registry Booster regularly keeps your PC
free from errors and from obsolete, unused or unwanted
files.See our review section for more detailed info about
this great software!
www.uniblue.com
SiteGrinder 2.0.5 and PSD2FLA v1 trial
New website production plug-ins for Adobe Photoshop
enable designers and photographers to rapidly produce
entire websites with image galleries, slideshows, con-
tact forms, and more! Media Lab makes a program, a
plug-in, for Photoshop. The concept is deceivably sim-
ple: you install SiteGrinder as a plug-in in Photoshop’s
plug-ins folder (with an installer – no need for manual
dropping of files) and once you have created a few lay-
ers with content, SiteGrinder builds them as separate
pages. Try it with .psd and to read more check our re-
view section!
www.medialab.com
Photos, Illustrations, Templates
Check out greatest Photos, Illustrations and Flash files
that we have collected for you together with iStock.
www.istock.com

A Sensational Selection of Website Templates and Music Loops from BoxedArt.com 5 Free fully
customizable website templates and background music loops to start off your digital store front!
This month BoxedArt has provided 5 free website design templates and music loops polish off your
business with the right look and sound. BoxedArt.com is renowned as the industry leader for print
and web design materials because of their amazing value with access to more than 5,000 products
for just $49.99, and their superior quality. BoxedArt’s products are useful for the needs of every de-
signer as they provide full layered PSD files for all products so any Photoshop user can adjust the
look and content of each product to their own needs.
Stop by its superb website at www.boxedart.com and you’ll soon understand why we’re particularly
proud to bring you a fantastic sample pack for its products. With a dizzying array of web templates,
flash templates, print brochures, menus, interfaces, flyers, newsletters, and more than 30 astonishing
categories of materials you’re sure to find more products then you and your clients will ever need.
Check out the screen shots to see what BoxedArt has provided for this month’s issue, check out the
disc to receive your 10 free products, and then check our www.boxedart.com for all of your design
needs for the web, print, and beyond!
www.BoxedArt.com
8 .psd starterkit 2/2007
2 CDs here
If the CD contents cannot be accessed and the disc isn’t physically damaged,
try to run it in at least two CD-drives.
If you have encountered any problems with CD, please write to: cd@software.com.pl

CD1

CD2

.psd starterkit 2/2007 9


contributors .PSD MAGAZINE
is published by Software Media LLC
(on Software Publishing House Licence www.software.com.pl/en)
Barksdale Professional Centre Newark, DE 19711 USA

Stefan Mischook Editor in Chief:


Stefan Mischook has been developing web sites and web applications Ewa Samulska ewa.samulska@psdmag.org
since 1994. Along with contract work, Stefan now runs the popular Executive Editor:
web sites www.killersites.com and www.how-to-build-websites.com Ewa Dudzic ewa.dudzic@software.com.pl
writing concise to the point articles with the aim of teaching people Art Director:
real-world web design skills. www.killersites.com Agnieszka Marchocka agnes@software.com.pl
DTP Director:
Jason Vaughn Sławomir Zadrożny slawek.zadrozny@software.com.pl
CreativePublic offers graphic designers a one-stop resource and in-
formation guide to help designers be more successful in business. Art Executive Manager:
Whether you freelance or own your own firm, CreativePublic has the Anna Osiecka annao@software.com.pl
products to fit your growing business needs. Visit the FAQs page for
more information on their products. http://www.creativepublic.com President:
Monika Nowicka monika.nowicka@software.com.pl
Daren Hawes Senior Consultant/Publisher:
Daren Hawes is the CEO of Web Design Magic, an established web Paweł Marciniak pawel@software.com.pl
design house based on the Gold Coast, Australia and servicing South
National Sales Manager:
East Queensland. Daren holds a Masters Degree in System Develop-
ment (.NET Programming), Microsoft Certified Solution Developer Monika Nowicka monika.nowicka@software.com.pl
(MCSD) and Microsoft Certified Application Developer (MCAD). Buisness Development Manager:
http://www.webdesignmagic.com.au Monika Nowicka monika.nowicka@software.com.pl
Marketing Director:
Chris Wizner Ewa Dudzic ewa.dudzic@software.com.pl
Chris Wizner is a resident of Malibu where he currently owns and Executive Ad Consultant:
runs the full-service advertising agency, Vivid CandiTM. Chris began Ewa Samulska ewa.samulska@software.com.pl
his first company. He is a member of the local Chambers of Com-
Production Director:
merce, one of which provided him with a college scholarship for his
business efforts. http://www.vividcandi.com/ Marta Kurpiewska marta.kurpiewska@software.com.pl
Prepress technician:
Atul Thakur Sławomir Zadrożny slawek.zadrozny@software.com.pl
Atul Thakur, is currently working as a Graphic Designer, offering
online training and consultancy through Inside Images. Inside Im-
ages (the site) is Digital Art portal designed for everyone interested in Postal addres:
Photo Effects and digital arts. It is a useful place to find free down- Software Media LLC
loads and comprehensive resources. Site publishes the reviews of the
1461 A First Avenue, # 360
plugins, helping users before purchase. www.insideimages.com
New York, NY 10021-2209
Nino Del Padre USA
Nino Del Padre founded Del Padre Visual Productions in 1991, and Phone number: 1-917-338 - 3631
today specializes in video production, interactive CD-ROM design, Fax: +48 22 887 10 11
and high-end Web design. His clients include NASA, the Space Sci- www.psdmag.org/en
ence Institute, LEGO Systems, Barnes Aerospace, and Proficient Au-
dio. DVP has also garnered many awards for its work in new media. Software Media LCC is looking for partners
www.delpadre.com
from all over the world. If you are interested in
Mike Bedford cooperating with us, please contact us by e-mail:
Mike Bedford works as an IT Consultant in higher education in the editors@psdmag.org
LA area. In addition to supporting a hundred Macs, he enjoys pho- Print: ArtDruk, Printed in Poland
tography and experimenting with digital imaging effects. To share Distributed in the USA by: Source Interlink
that exploration with others, Mike publishes the free Plugs 'N Pixels Fulfillment Division, 27500 Riverview Centre
ezine. Visit the Plugs 'N Pixels website for more info (and discounted Boulevard, Suite 400, Bonita Springs, FL 34134 Tel:
plug-ins!) at http://www.plugsandpixels.com 239-949-4450.
Distributed in Australia by: Gordon and Gotch,
Mick Moolhuijsen Australia Pty Ltd., Level 2, 9 Roadborough Road
19 years young and living in the Netherlands.He is an outgoing and
creative guy with a good sense of humor. He spends his days either Locked Bag 527
working for himself or for his study (Gamedesign). In his leisure time NSW 2086 Sydney, Australia
He draws, watches movies, games a little, works out, eats, sleeps, pho- tel: + 61 2 9972 8800
toshops and most of all... has fun! All trade marks presented in the magazine were used
only for informative purposes. All rights to trade
marks presented in the magazine are reserved by the
companies which own them.
Also:
Adrian McCanna,
The editors use automatic DTP system
Eric www.photoshopsupport.com,
CDs tested by AntiVirenKit GDATA Software Sp. z o.o.
Ades Tynyshev www.adesdesign.net
Editorial contributions should be sent to: editors@psdmag.org
Raspal Chima http://www.bbconsult.co.uk/
Subscriber changes send to subscription@software.com.pl
The Uncoolhunter Team http://www.theuncoolhunter.com Customer Service 1-917-338 - 3631
The Software Media LCC works individually from Adobe.
The .psd team reserves the right not to be responsible for the
topicality, correctness, completeness or quality of the information
provided by contributors.
10
web design

Introduction
to Photoshop
This lesson is a brief introduction to Photoshop, I will not cover all the topics but I will cover enough of them to
teach you how to edit (resize, crop, merge) images yourself without asking somebody else. Adobe Photoshop is prob-
ably the singe image editing program that you need. It is a very comprehensive software, it can meet almost all your
needs and solve almost all your problems that you face with the images. You have been hearing about Photoshop all
these while, everyday more and more. So here is your chance to get your hands on Photoshop. If you don't have the
software buy one, or download the trial but fully functional version at Adobe.com. Let's get started!

Here is the screenshot of Photoshop Interface. Patch Tool (J): Used for correcting images.

Brush Tool (B): Used for drawing freehand.

Clone Stamp Tool (S): Used for selecting a source and


copying (drawing) it in another place.

Gradient Tool (G): Used for making gradient effect


on images.

History Brush Tool (Y): Used for restoring specified


history state.

Eraser Tool (E): You are right, this tool is used for
erasing ;).

Dodge Tool (O): Used for making images lighter (And


Burn tool makes the opposite – darker).

Blur Tool (R): Used for stretching, sharpening the


photo.

Path Selection Tool (A): Used for selecting the active


path.

Horizontal Type Tool (T): Yes used for inserting text


to image.

Rectangular Marquee Tool (M): It is used for making Custom Shape Tool (U): Used to insert pre-specified
selection on the image (objects) on any active layer. (ready) shapes to image.

Move Tool (V): Is used to select and move images (ob- Pen Tool (P): Used for creating vector shapes.
jects) on any active layer.

Polygonal Lasso Tool (L): Used for making free selec- Notes Tool (N): Used for inserting notes on the im-
tion as you go. age.

Magic Wand Tool (W): Used for making selection Eyedropper Tool (I): Used for selecting color.
(similar colors at once for example).

Crop Tool (C): Used for cropping images. Zoom Tool (Z): Yes used for zooming in or out.

Slice Select Tool (K): Used for selecting slices. Hand Tool (H): Used for dragging image when you
are in the zoom in state.

12 .psd starterkit 2/2007


introduction to Photoshop

Tools and Options Panel


Open your Photoshop (Figure 1). If you don't see Tools Toolbar
already then go to Window>Tools (Figure 2).
See the screenshot of the Tools panel (Figure 3). If the tool
has a small trianlge at the bottom corner it means it has more
than one tools. To see these options just click on the tool and
hold your mouse for a few seconds, and you will see the op-
tions on the popup window as shown. Let's go through one
tool from each group and their functions. The letters inside
the brackets are the shortcuts for the particular tool, when
you are in Photoshop and press [V] for example it would se-
lect the Move Tool.

Options Panel
Options Panel is highlighted with light-red (Figure 4). When-
ever you switch from one tool to another, Options Panel will
change accordingly. Currently as you can see Brush Tool is se-
lected in the Tools panel, and in the Options Panel you can see
Figure 1. Photoshop Interface
the properties of the Brush Tool, namely: Brush Size (Type),
Mode, Opacity and Flow.
Just remember to look up to the Options Panel when you
choose a particular tool, because sometimes if something is
selected or unselected in the Options Panel, you might not be
able to use that particular tool properly. For example Opac-
ity of the color might be set to Zero in the Options Panel, in
that case anything that you draw would not show up since 0
means invisible.

Cropping Figure 2. Tools and Options Panel


Cropping images is actually that easy in Photoshop, just select
the area you want to keep and press Enter on your keyboard,
and you are done. You can also press on the Move Tool instead
of pressing Enter on your keyboard, it will prompt you a win-
dow similar to the one shown. If you are satisfied with your
selection just press on the Crop button and your image will be
cropped.
Download this image or open any image in your Photoshop.
Select the Crop Tool (Press C to Select or Select it with your
Mouse) and draw a selection on your image as shown. To make
a selection click and drag with your mouse. Make a selection-
After you made your selection press Enter (Figure 5). Crop-
ping images is actually that easy in Photoshop, just select the
area you want to keep and press Enter on your keyboard, and
you are done (Figure 6). You can also press on the Move Tool
instead of pressing Enter on your keyboard, it will prompt
you a window similar to the one shown (Figure 7). If you are
satisfied with your selection just press on the Crop button and
your image will be cropped (Figure 8).

Copying & Pasting Figure 3. Tools Figure 4. Options Panel


Download this image or open any image in your Photoshop.
Select the Rectangular Marquee Tool (M) and make a selection
on the image as shown (Figure 9).
Make a selection and press [Ctrl]+[C] or go to Edit>Copy
Presss [Ctrl]+[N] to open a new window or go to File>New
and press OK.

Note:
Figure 5. After you made your selection press Enter
When working with Texts it's important to click on
Move Tool (V) after you are done typing. Many newbies
make this mistake of not clicking on Move Tool or on any
other tool than the Text Tool and are literally stuck in the
Photoshop.
To move your text from one place to another choose the
Move Tool and just click on your text with your mouse
and without releasing your mouse move the text to the
desired place. Figure 6. Result Figure 7. Cropped

.psd starterkit 2/2007 13


web design

And now press [Ctrl]+[V] to paste the copied image or go to


File>Paste. Whenever you make a selection on the image and
copy that area, Photoshop automatically saves the dimensions
of that selection in its memory. Thus when you open a new
window, dimensions of the image will already be in the Width
and Height fields.
Figure 8. Cropping images
Image Adjustment
I will not explain how to adjust images in this section, but will
point out the tools that is used for image adjustment (Figure
11). Go to Image>Adjustments (Figure 12). You will see the
menu as shown. Go ahead and try some of the effects on your
image, try to change the Brightness>Contrast, Auto Color... etc.
Sometimes using Photoshop's pre-defined Image Adjustment
options will solve your problem, try using Auto Levels, Auto
Contrast or Auto Color on your photos before you proceed
with other options.
Figure 9. Selection
Working with Texts
Open a new window [Ctrl]+[N](choose a bigger dimensions
for the window; width 400 and height 300) and press OK.
Select the Horizontal Type Tool (T) and click on the window
that you just opened and type something. If you want to make
changes to your text, highlight it and change the properties
from Options Panel (Figure 13).

After you are done making changes click on the Move Tool
(V) and by clicking on your text position it on the top left
corner of the window (Figure 14). There is another way to
change the properties of the Text, in addition to the Options
Panel we have discussed and that is by using Character Panel.
Figure 10. New image If you don't see the Character Panel go to Windows>Character
to bring up the Character Panel (Figure 15).
Look at the Character Panel screenshot, if you change any of
the properties in this window it will be reflected on your text.
However, for it to be effective you need to be on the correct
layer, otherwise you will not see any changes on the text. Lay-
ers will be our next discussion.

Working with Layers


Photoshop uses Layers for managing multiple (separate)
Figure 11. Copied image objects in the same file, to open your Layers Panel go to
Window>Layers. If you have used other image editing pro-
grams that use the same Layers concept. Then this should be
familiar to you. If you haven't then it's an easy concept to
understand, just think of the Layers as a Stack of Books on the
floor, and imagine yourself as looking at this stack of books
from top.
Firstly, when you look at this stack from top, you will be able
to see the cover of the first book which is on top of all the
other books without a problem, however when you try to see
the cover of the second book that is below the first book, you
will notice that most of it are not visible to you. Because it's
being blocked by the first book. And when you look at the
third book's cover it will be even more hidden from your eyes.
So think of Layers in Photoshop as a Stack of Books, one layer
representing one book or level in the stack.

Layer that is on top


As you can see from the image above, the blue circle is lo-
Figure 12. Image Adjustment cated on the Top Layer, I have named the Layer as Circle, and
red rectangle is on second layer, I have named this layer as
Rectangle. As we have discussed earlier, book that is on top of

Note:

And if you want to move particular object you should


select its respective layer first, then only you can move it.
Figure 13. Working with Texts
Otherwise you will end up moving something else.

14 .psd starterkit 2/2007


introduction to Photoshop

the stack will cover the layers below. Thus you see the Cir-
cle covering Rectangle. And our background is a white color
which is visible from the sides of the circle and rectangle.

Changing layer positions


Here I have moved Red Rectangle to Top, as you see now Red
Rectangle is on top and it covers the Circle (Figure 16). To
move the particular layer just click on it with your mouse and
while still holding your mouse move it up or down. Or you
can click on the Layer that you want to move and use short-
cut keys on your keyboard to move it up (Ctrl+]) and down
(Ctrl=[). Figure 14. Options Panel

What is Active Layer


Active layer is the layer which you are working on, for exam-
ple from the image we can see that the Active Layer is the Rec-
tangle Layer – active layer will always be highlighted (selected)
(Figure 17).The Eye icon on the left of the layers means that
the layers are currently visible, if you toggle them off then
the object will also disappear (will become invisible) from our
window.

As you can see from the screenshot above, I have deselected/


removed the eye icon from the layer Rectangle. We still can see
the rectangle in the Layers Panel but it is not visible on our im-
age – we can only see the blue circle.

Saving for Web (as JPG or GIF) Figure 15. Character Panel
After you have completed your work I believe you would want
to save it as .jpg or .gif (or any other format that Photoshop
supports).
To save your image for web go to File>Save for Web or press
[Alt]+[Shift]+[Ctrl]+[S] and you will see an identical window
like this one (Figure 18). From here you can change the image
type to JPG, GIF, PNG and WBMP. You can change the qual-
ity of the image as well, the higher the quality the bigger the
size will be. Take the size into account when saving big images
for web usage. Because, the higher is the quality of the image
the bigger the size will be. And as you know big images will
load very slow on internet.
I believe, here our lesson end, I hope it was fun learn- Figure 16. Layer that is on top
ing Photoshop. Now that you know how to work with
Photoshop you can check my other Photoshop tutorials at
www.adesdesign.net.

by Ades Tynyshev
www.adesdesign.net

Figure 17. Changing layer positions

Figure 18. Saving for Web

.psd starterkit 2/2007 15


web design

Database driven websites:


what are they and how are
they built?
When I was beginning web design and web programming years back, I remember all the confusing terms, technolo-
gies, and concepts that were floating around that just made it that much more difficult to wrap my head around
the whole web thing. With that in mind, I thought that it might be a good idea to write an article that will help
people get a clearer understanding of what’s out there.

This article will attempt to demystify database driven


web pages also called dynamic web pages or websites.
Don’t worry, I am not going to go into any painful
mega-geek details about how to create dynamic web
pages, instead I will give a brief overview to help you
understand:
• When you would need to build dynamic web sites.
• What tools you have available to build them.
• What are dynamic web pages?
To understand dynamic web pages, you have to under-
stand normal or in other words, static web pages.
Typical (non-dynamic) web pages do not change every
time the browser loads the page, nor do they change if
a user clicks on a button. The only change that you will
see in a static web page, is to see it load and unload like
what happens when you click on a hyperlink.
In a nutshell: static web pages (normal pages that you
build,) always look the same and the content never www.killerphp.com
changes unless you load a new page, or you change the
page yourself and upload the new version of the page to
the web server.
Dynamic pages do the opposite; they can change every
time they are loaded (without you having to make those
changes) and they can change their content based on
what users do, like clicking on some text or an image. I
am not talking about loading a new page! (Figure 1).
Database driven web pages
One of the most common types of dynamic web pages
is the database driven type. This means that you have
a web page that grabs information from a database (the
web page is connected to the database by program-
ming,) and inserts that information into the web page
each time it is loaded.
If the information stored in the database changes, the
web page connected to the database will also change
accordingly (and automatically,) without human inter-
vention. www.killersites.com

16 .psd starterkit 2/2007


database driven websites

WHAT ARE DATABASES

Programming languages Databases are virtual


likePHP create the connection filing cabinets or perhaps
between the web page roledexs, that are used to
and the database. organise and store
information / data.

PHP
... Thus the name:
'data' + 'base'
-> a base of data.
www.webshapes.com
Shopping carts are classic
example of a dynamic
DYNAMIC WEB PAGES VS. STATIC web pages.

Databases often hold


Figure 2. What are databases
the content for dynamic
web sites
Static pages stand alone and • PHP (www.killerphp.com),
have to be manually updated by • JSP,
the web designer • ASP,
• PERL,
• Cold Fusion.
Database driven web site programming can also be
Shopping carts are a classic called (or characterized as): server side programming.
example of a dynamic web pages. The reason it is so called is because the action or magic
that allows the web pages to connect to the database
is actually taking place on the server. This is what hap-
Figure 1. Dynamic vs static web page pens: each time a dynamic web page is about to be sent
to the browser, the server automatically builds the page
This is commonly seen on online banking sites where and sends a standard HTML page to the browser. The
you can log in (by entering your user name and pass- server knows how to build the page by following the
word,) and check out your bank account balance. Your instructions provided by the programmer. This is dif-
bank account information is stored in a database and has ferent from say JavaScript (think drop down menus or
been connected to the web page with programming (ex: alert boxes) that runs strictly in the web browser. At this
PHP, ASP) thus enabling you to see your banking in- point many people are getting very confused, the confu-
formation. Imagine if the web page holding your bank- sion lies in the difference between server side program-
ing information had to be built traditionally (that is by ming (database driven web pages) versus client side pro-
hand,) every time your bank balance changed! Even a gramming (JavaScript).
thousand monkeys working 24/7 drinking 5 cups of cof-
fee a day, would not be able to keep up! Client side programmming
Hopefully you are starting to see why you would want a – the other type of dynamic web page
database driven site: you would want it if your informa- Client side (that is to say: in the browser) or what is
tion changes very often, just like in a banking site. commonly called DHTML dynamic HTML.
DHTML is basically taking HTML and JavaScript
Technologies used to build database driven websites (sometimes VB script) to make the web page change it’s
Database driven sites can be built using several compet- own content (as far as the viewer is concerned) without
ing technologies, each with it’s own advantages (Figure 2). having to reload or load a new page.
Some of those technologies/tools include: Examples of DHTML would include drop down menu’s,
floating images that hover over the rest of the page etc if
Note
you look around, you will find plenty on the web.
The downside of this simple approach is that I am not
The name DHTML has been replaced by the term being 100% precise some geeks out there may point out
DOM SCRIPTING. It's pretty much the same stuff one or two items that are not dead on. But don’t worry,
(programming in the browser to make things hap- my points are not in any way wrong. Suffice it to say
pen dynamically,) but DHTML has a little bit of a bad that this was an introduction to the topic.
wrap from the late 90's, so more people now refer to it
as DOM scripting. Hopefully now you have basic con- by Stefan Mischook
ceptual understanding of dynamic web sites, DHTML www.killersites.com
and database driven web sites. I tried to present the in- www.webshapes.org
formation in a non-geek way so as to not confuse. www.killerphp.com

.psd starterkit 2/2007 17


web design

CreativePublic Web Designing Lessons

Develop Site Content


This lesson is designed to help you develop and gather Audience: Who's the target audience? Who's most likely
content for a Web site. In this lesson, you will learn to visit this site? What age group are you targeting?
about content and how to organize it as well as what Type of Web site: Make sure your client understands the
questions to ask your client. It is recommended that you types of sites that are out there. Help the client deter-
attend the classroom lectures to get the full understand- mine what they need, based on the Purpose of their site.
ing of this lesson. Will this site be a portal, promotional, ecommerce, or a
content site? It's up to you to educate your client so they
Web site content and structure can better understand what you are talking about.
Determine your menu and content for your site by Page links and page content: Once you have a basic un-
deciding what service, product or type of site your derstanding of what the client's needs are, then it's time
client is needing. Some clients have no idea what to determine links, content and how many pages the
they want, it's up to the designer to help the client site will be. Each link will have to have content based on
understand the types of Web sites there are and how the information you gathered from the client.
to get started. For example, the home page of the Web site will have
Clients you're working with usually have a better un- the majority of the links. It's always best to start off with
derstanding of their business than you do. You will need the Home page first and then follow with other pages.
your client to provide as much information about what For each page, you may want to add separate sheets of pa-
they do as possible – have them provide samples of bro- per and write down the links they may have. Some site's
chures, business cards, newspaper ads, yellow page ads secondary pages have links to other pages within the site.
or anything else you can think of that will help you de- Later, you'll transfer this to a site map for a visual layout
sign and structure their site. and structure of the site. Remember that you don't have
At this point, you may need to hire a copywriter to pro- to use these link names. Be creative with your link names,
duce text for the site. If the client does not have this in but keep them clear and understandable to your visitor.
their budget, then have the client provide text for you
based on your guidelines. Some clients already have an Suggested links for the Home page
idea of what they want. Use what they have and en- Company (about us): Discuss company information.
hance it when necessary. Tell how the company got started and how long they
The following are types of questions and information to have been in business. Possibly list awards and business
get from your client. These questions will help you in the partner relationships.
design process and better enable you to build a site map. Contact: Information on how clients can contact you.
Join CreativePublic and download the Web site question- Make sure to include email, phone, etc.
naire and use this form to interview your clients needs Services: List what the company does, what services are
and wants. offered, and possibly include a pricing section.
Product or project showcase: Have a showcase for the cli-
Questions to ask ent to display their projects. Whether it's art or con-
Purpose of Web site: Ask your client what they plan to do struction, an area for displaying projects is essential.
with the site. In other words, are they selling a product Secondary page links Product Page: Let's say this site is
like nuts and bolts or is this more of an information site, a hardware store. For this example, you will have three
like a brochure. links to three different product pages:

18 .psd starterkit 2/2007


creativepublic web designing lessons

• Nuts and Bolts,


• Tools,
• Wood.
Now for each product, you'll need to consult your
client and have information provided to you on each
of these areas.
Technical support questions:
You will need to find out who your client is using for
a hosting provider. You may want to offer them a great
hosting plan yourself or guide them to a company to
get hosting services. Keep in mind that most clients are
coming to you for full service. Most clients don't under-
stand how the Internet works, they just want their Web
site to work. Research hosting plans and come up with
a list of ways to make money for yourself or find an easy
way for clients to handle it.
Hosting (service provider): Who's the client's hosting Figure 1. Original and optimized GIF image
company. Discuss plans and costs for services needed.
FTP (file transfer protocol): Get your server information
from the service provider providing the hosting service,
including username and password to access the site up-
load area.
Domain name: Find out if your client already has a do-
main name. You will need to get that account informa-
tion to forward any domains to a new server location.
Keywords: Think of keywords that you want the search
engines to be able to search for. For example, use words
like: tools, nuts, bolts, wood, and hardware. These key-
words will help you set up the Meta Tag section of the
site, which enables search engines to locate the page.
Overall, this lesson will help you determine the client's
needs. After asking these questions and getting all the
necessary information, it's time to put it all together
and create a site map. Once this is done, get with your
client to approve copy and site structure. After that ap-
proval process is done, then move onto design.

File Types and Optimization


This lesson is designed to help you understand file
types and file optimization. In this lesson, you will learn
about GIF, JPG and PNG file formats. This lesson uses
Adobe's Save for Web feature, located in Illustrator and
Photoshop. Adobe ImageReady offers the same fea-
tures, but is set up a little differently.
Choosing a file format for optimization
GIF files are the most common way to save your im- Figure 2. The menu
ages for the Web. GIF files are low in memory and easy
to make. GIFs and PNG-8 are mostly used for graphic
elements such as line art or solid colored areas such as
text. You can save photos as GIF files but most continu-
ous tone images such as photos are saved as JPEG files.
Depending on the quality you are looking for, GIF files
are quality enough for most images, including small pho-
tos. If you are looking for a sharp quality, continuos tone
photo, then JPEG is best. PNG-24 file format is suitable
for continuous-tone images. However, PNG-24 files are
often much larger than JPEG files of the same image.
Image appearances vary from browser to browser and from
system to system. Preview your image in different formats
and test them with different browsers and color settings.
More about JPEG files
The JPEG format supports 24-bit color and preserves
a large range of color and subtle variations in bright-
ness and hue, and other continuous-tone images. Most Figure 3. Changing settings
browsers support JPEG.

.psd starterkit 2/2007 19


web design

JPEG compresses file size by selectively discarding data.


Because it discards data, JPEG compression is called lossy.
A higher quality setting results in less data being discard-
ed. You should always save JPEG files from the original
image in order to keep the image quality at its best.
You can create a progressive JPEG file by selecting it
in your palette window. This produces a low-resolution
version of the image that appears in your browser while
the full image is downloading. This allows the users to
see the image and tells them it is loading.
The JPEG format does not support transparency.
When you save an image as a JPEG, transparent pixels
are filled with the Matte color. If you know the back-
ground color of the Web page where you will place the
image, you can match the Matte color to the Web page
background color to simulate the effect of background
transparency.
More about GIF files
The GIF format uses 8-bit color and compresses solid
areas of color while preserving sharp detail, such as that
in line art, logos, or illustrations with type. Most brows-
ers support GIF. Figure 4. 640x480 resolution
The GIF format traditionally uses a lossless compres-
sion method, in which no data is discarded during com-
pression. You can save a GIF file multiple times without
discarding data. However, because GIF files are 8-bit
color, optimizing an original 24-bit image as an 8-bit
GIF will generally degrade image quality.
In addition, Illustrator allows you to create a lossy ver-
sion of a GIF file. The lossy GIF format includes small
compression artifacts (similar to those in JPEG files)
but yields significantly smaller files.
You can reduce the number of colors in a GIF and choose
options to control the way colors dither in the applica-
tion or in a browser. GIF supports background transpar-
ency and background matting, in which you blend the
edges of the image with a Web page background color.
More about PNG files
The PNG-8 format uses 8-bit color. Like the GIF for-
mat, PNG-8 efficiently compresses solid areas of color
while preserving sharp detail, such as that in line art,
logos, or illustrations with type. Because all browsers do
not support PNG-8, it may be advisable to avoid this
format for situations in which your image must be ac- Figure 5. Browser window palette
cessible to the widest possible Web viewing audience.
For more information on browser support for PNG,
see your browser's documentation.The PNG-24 for-
mat supports 24-bit color and preserves a large range of
color and subtle variations in brightness and hue, and
other continuous-tone images. Like the GIF and PNG-
8 formats, PNG-24 preserves sharp detail, such as that
in line art, logos, or illustrations with type.
For more information on browser support for PNG,
see your browser's documentation.
• Open Photoshop then open the file called hand_
shake.tif (download image),
• Once your image is open, then select File / Save for
Web... A new window opens showing your image
with different palette selections. Select the 2-Up
tab at the top, so you can view your original image
and your optimized GIF image (Figure 1).
• The menu to your right is where you will opti-
mize your image. Select the Selection tab at the
top of the palette and choose GIF 64 Dither. This
setting works best for most images. Notice how
it fills in the settings for you. Experiment with Figure 6. 800x600 resolution
the different settings for your GIF image and see
what happens (Figure 2).

20 .psd starterkit 2/2007


creativepublic web designing lessons

• Notice the image to the right. The settings are the


same as in step-3 above, except for the amount of
colors displayed. Previously the amount of colors
was 64, but now the color settings have been
changed to 16. Notice the quality of the image to
the right. Quality has been sacrificed, leaving the
image in poor shape. However, notice the image
size. It is considerably smaller than the original and
somewhat smaller than the 64 colored image. Test
these settings and see what happens (Figure 3).
• When finished, click OK and save your file. This is
how images are optimized. Later in lesson 6 (L-6
Web Site Design), you will learn more about where
to save these files and how to splice images for the
Web.

Audience Limitations
This lesson is designed to help you get a better un-
derstanding of audience limitations on the Internet.
Figure 7. Websafe colors In this lesson, you will learn about audience moni-
tor sizes, what type of browsers and plug-ins are
being used and what problems exist. You will also
learn about bandwidth and who may or may not
have a high-speed connection. It is recommended
that you attend the class lectures to get a full under-
standing of this lesson.
Monitor sizes
Today's Web surfers have larger monitors ranging from
15-21 inches in size. A few years ago, 14 inch monitors
set at 640 x 480 resolution came with most computer
systems, but today, most computer systems come stand-
ard with a 15-inch monitor set at 800 x 600 resolution
or higher allowing a larger view area (Figure 4).
When designing your Web site, consider the range of
Figure 8. Websafe color (left) non-Websafe color (right) audience you're targeting. For example, you want those
who have 14-inch monitors to be able to view your site
as well as someone with a larger monitor. To do so, you
would need to set your site goals to the smallest view area.
This creates minimal scrolling to the left or right of your
Web page as well as keeping most of your important in-
formation above the fold. Above the fold is a newspaper
term that relates to all the information existing above
the fold in the center of the page. Usually this informa-
tion contains the top stories or hot information since it is
what the audience sees first. Therefore your most valua-
ble information should be as much above the fold as pos-
sible. However, 14-inch monitors set a 640 x 480 have a
very limited view area. This is due mostly to the browser
window. Most users have no idea how to adjust their
browser window palettes, so most users settings are set at
default allowing a limited view area (Figure 5).
Figure 9. Clean photo Notice in the graphic above that the browser cuts off a
quarter of the design and doesn't allow for much con-
tent to show above the fold. See the graphic below for a
view of an 800 x 600 view of the same site.
To be able to target every single possible user, then you
must design your site around these limitations. Even
without the view problems, you may want to design
your site with a smaller width in mind. Not every site
has to be big and cover the entire screen (Figure 6).
Always keep in the back of your mind that you will not
make every user happy. There are too many variables in
users' settings. Stick with today's standards and adjust
when necessary to fit your target audience.
Monitor View areas
Figure 10. Grainy image (left) and patchy image (right) Now that you understand monitor sizes, you will need
to know the view area. The view area is the window that
houses the design elements. For example, you have an 800
x 600 / 15-inch monitor; your browser will take up a por-

.psd starterkit 2/2007 21


web design

tion of this window only allowing for a 760 x 420 page color. It is recommended that you attend the class-
view. If you were working with a 14-inch monitor set a room lectures to get the full understanding of this
640 x 480, your page view area is 600 x 300. The browser lesson.
window really takes up a large area (see graphic below).
Web-safe colors
Types of Browsers and their problem In HTML, colors are expressed either as hexadecimal
There are two major brands of browsers on the mar- values (for example, #FF0000) or as color names (red).
ket, Internet Explorer and Netscape Navigator. Each The colors that are common to Netscape Navigator
browser views pages differently including font sizes as and Microsoft Internet Explorer on both Windows and
well as tables and frames. When designing a Web site, Macintosh systems when running in 256-color mode
it is best to view your site with both browsers. Work- are called "Web-safe". The conventional wisdom is that
ing with your HTML code, you can sometimes fix your there are 216 common colors, and that any hexadecimal
problems that a WYSIWYG program may not auto- value that combines the pairs 00, 33, 66, 99, CC, or FF
matically do for you. Some WYSIWYG programs such (RGB values 0, 51, 102, 153, 204, and 255, respective-
as Dreamweaver, allow you to check for errors in code ly) represents a Web-safe color.
on your site in older browsers and new browsers. Some Testing, however, reveals that there are only 212 Web-safe
browsers will not support certain tags and some will not colors. Internet Explorer for Windows does not correctly
support certain Java scripting. Most 4.0 browsers and render the colors #0033FF (0,51,255), #3300FF (51,0,255),
above work fine with most design and programming #00FF33 (0,255,51), and #33FF00 (51,255,0).
issues. But it's always a good idea to preview in both All of the color pickers in Dreamweaver use the 212-
browsers before getting too involved in your site. Let color Web-safe palette; selecting a color from the
your audience know what type of browser your site re- palette displays the color's hexadecimal value. While
quires for optimum viewing. Tell them type and version the four colors mentioned previously are not in the
of the browser when necessary. Dreamweaver Web-safe palette, you can edit the hexa-
decimal value in any color field by hand if you want
Plug-ins and who has them to use them.
Over 80% of users worldwide have the Flash plug-in by To choose a color outside the Web-safe range, click
Macromedia installed on their computer. When design- the Palette button in the lower right corner of the
ing a Web site that is using Flash animation, keep in Dreamweaver color picker to open the system color
mind who has the most recent plug-in or who doesn't. picker. The system color picker is not limited to Web-
Many of today's Web surfers have no problem down- safe colors (Figure 7).
loading plug-ins, as long as its simple and easy for them Color on the web can be very limiting. Most users are
– Macromedia has done this. now running a higher range of colors on their moni-
Offer your audience a way to download the plug-in or tors. About 10% of users have their monitors set to 256
offer them an alternative, such as an HTML site with colors. Colors outside of Web-safe will still show up in
no Flash. Be careful when doing this, you can give your- 256 color even though they are out of range. You will get
self a real headache when it comes time to update two a grainy look (some colors may gray out) and some photos
sites instead of one. will have a patchy look to them. When you use the Save
Apple® and RealNetworks also makes it easy to down- for Web feature in Adobe Illustrator or Photoshop, you
load their plug-ins, QuickTime™ plug-in as well as the can help correct this problem by using the dither feature.
Real Audio® plug-in. Try and let your users know up Use your judgement and determine who your audience is
front, on the Splash page, what to expect when entering before using too many non-Web-safe colors.
your site. Tell them what plug-ins are required and how Visit this link to learn more about Hex colors and how to
to get them. make them. http://www.cookwood.com/html4_4e/colors/.
The box graphic (Figure 8) is a web safe color (256
Bandwidth color setting) This box shows a smooth solid color
Not many Internet users have high-speed connections. – Hex color #9966CC (Web-safe).
Most are using a dial-up account that is supporting The box (Figure 9) is non-web safe color viewed in 256
speeds up to 56K. When designing your site you need color. This box has a grainy look to it - Hex color (non-
to support those without high speed Internet access. If Web-safe) #8F5FCD. Graphic of photo (thousands of
your site is supporting video and audio, more of your color view)Notice this photo is clean. The dither fea-
audience will be using DSL or cable to access your site. ture was still used in order to smooth the image, but the
If your graphics are too large then your visitors will leave quality is very good.
your site. Optimize your images to the lowest possible Notice (Figure 10) image is grainy and (Figure 11)
size without sacrificing too much quality. Your average image is patchy. Depending on the amount of colors
home page will have a memory of 45K to 60K. This you use and if you use dither on your image, this is
includes the HTML coded page as well as all graphics. how they might turn out. Experiment with different
This does not seem like much, but with a slow connec- settings to get a better understanding of your limita-
tion, this could take up to 20 seconds. Your average user tions.
will wait 10 to 12 seconds for the majority of the page
to load. If the page is taking too long, they will leave. RGB / CMYK
Know your audience and understand their limitations. Never use CMYK for your Web design. These colors do
Design your site according to your users. Some may have not show up correctly when converted to RGB. CMYK
a fast connection and others a slow connection. Research colors are for print design only and do not offer a wide
your audience carefully and know what you will have to enough gamma to achieve bright colors or Web-safe
sacrifice in order to reach your audience effectively. colors. JPEG files support CMYK but GIF and PNG
do not. None of your browsers will support files made
Color on the Web in CMYK including JPEG. The image will gray out or
not show up at all.
This lesson is designed to help you understand the us-
age of color on the Internet. In this lesson, you will by Jason Voughn
learn about Web safe colors, RGB, CMYK and Hex www.creativepublic.com

22 .psd starterkit 2/2007


web design

Using Graphics
for Web Page
A picture is worth a thousand words. You need some experience with a technical background to use certain type
of graphic format and a little common sense to use graphic for the web page. We will discuss about two main
dominating formats on the web. They are Gif and Jpeg.

Gif stands for Graphic Interchange Format contains with Maximum option, Quality 100, file size 136.7 KB
maximum 256 colors. This is the best option for line (Figure 4). We are gradually going for lower options to
art and the images with prominent solid colors. One minimize the size of file. The image is saved with Very
of the main features of this format is the transparent High option, Quality 80, file size 52.27 KB (Figure 5).
background facility. The image background can be This is the image saved with High option, Quality 60,
made transparent and placed on another background file size 28.91 KB (Figure 6). This is the image saved
to merge the two images. This format also supports ani-
mation. Gif animation can be the safest choice for small
buttons or cartoons. This is the format people generally
prefer for the images with no gradation. Web objects
like buttons or the banners with 2-3 solid colors or the
text headings made with single colors can be saved in
Gif format. Figure 1.
Jpeg (Joint Photographic Experts Group) is the best
choice for smooth color tone full color photographs as
the format supports 16 million colors. It reduces the
huge size photographs to considerably lesser size that
can be uploaded and seen on the web.
Using graphics on the web page increases the download- Figure 2.
ing time of the page hence you need to be careful about
the size of the graphic. Even while saving image in the
above format you can save it tactfully to lesser the size
and still keep the quality of the image intact. Software
like Photoshop gives you the option to select number of
colors while saving the image in Gif. Let us say you have
design a simple banner with single color background
and the text with different color. This image will have
just two solid colors. You have made up your mind to
save this image into Gif format and obviously that is
the best available option in this case. Photoshop still of-
fer you to save this image using all 256 colors and you
have used just 2 colors. So you can reduce the number
of colors while saving this banner to minimize the size
of the file. This can be further explained with the fol-
lowing example (Figure 1).
This is Gif image using 256 colors having the file size of
2.02 KB (Figure 2). The same banner saved in Gif again
but with 8 colors and the file size is 1.601 KB. Let us un-
derstand the saving options and the economy of the file Figure 3.
size using Jpeg format (Figure 3). This is the image saved

24 .psd starterkit 2/2007


Figure 4.

Figure 5.

Figure 6.

with Medium option, Quality 30, file size 13.91 KB.


This is the image saved with Low option, Quality 10,
file size 8.919 KB. You can observe the quality of the
image with respect to the economy of the file size and
make the choice for your web graphics.
by Atul Thakur
insideimages.com
web design

Screen Recorder
Software Comes Of Age
If a picture is worth a thousand words, then how about a thousand pictures – or a graphical animation…? When
it comes to using new or unfamiliar applications, there is nothing worse than being rushed through a series of steps
on screen at lightning speed, leaving you frustrated and none-the-wiser. The problem is familiar to many of us;
often, the person showing you how to use the new software or application is doing so at a rate that is slightly quicker
than the speed at which you can assimilate what they are saying.

This is one reason why screen-recording software has


become so popular; it allows the screen of the computer
to be recorded whilst a task is being carried out – which
can then be played back and a soundtrack added to help
anyone who wants to watch and understand the proc-
ess that is being demonstrated. The concept of using
the computer screen to illustrate an on-screen process
or program is not new; tools that do this have been used
for many years to market and demonstrate commercial
software products, and to tutor customers in how to use
those products.
What is new is the ease with which the novice can now cre-
ate professional-looking animated demonstrations, with-
out first having to take a course in multimedia, or purchas-
ing expensive development applications. Add to this the
latest compression software and sophisticated recording
technology and you have the beginnings of screen capture
movie-making that can rendered at high frame rates to
produce the smoothest, best looking results while keeping
file sizes small enough to manage even on the web.
Screen recorders have a range of uses:
• To demonstrate an application or service,
• To produce ‘how-to’ films (for example, how to use
a specific computer program feature),
• To create narrated demonstrations – this is partic- Martin Green, Managing Director of Blueberry Soft-
ularly useful as software becomes more complex, ware, creator of the award-winning BB FlashBack
allowing users, reviewers and developers to share Screen Recording software, said: Screen recorders are
their understanding. Because screen recorders a valuable tool for enhancing training, tutorials, manu-
capture every detail of software interaction, the als and websites. The applications are literally limitless,
software can be of great interest to interaction de- from demonstrating commercial software to teaching
signers, as a way to observe the micro-behaviour computer literacy.What makes the next generation of
of their program users (the wandering around screen recording software like BB FlashBack stand out
with the mouse pointer, looking for menus and is that you get fantastic quality movies, but at file siz-
particular functions, etc.) so that they can im- es down to 100KB per minute recorded, making them
prove their product, easier to deliver by email or internet download. This
• To produce a screen-recorder-enhanced video – to has opened up completely new application possibilities
illustrate a particular point in a conventional dig- for their use as a learning tool, especially in IT support,
ital video demonstration. sales and marketing, and education and training – in

26 .psd starterkit 2/2007


screen recorder software

fact in any application where users want to record and


share on-screen events and procedures.
The new screen recorders can now produce exception-
ally compact movies, ready to be exported into the pop-
ular Flash, AVI, WMV, PPT or EXE formats, allowing
them to be streamed from Web pages, complete with
sound and embedded playback controls.
Products like BB FlashBack can also create completely
standalone self-playing movie files for distribution via
CD or e-mail. BB FlashBack’s extensive editing func-
tions allow the user to add text effects, edit and hide
mouse movements, display their own images in the
movie, cut and paste footage, change the movie speed
and alter the viewable area.
Whereas older screen-recording products work by tak-
ing frequent pictures of the whole screen, software like
BB FlashBack captures only the changed areas of the
screen, which results in reduced impact on the PC and
much smoother recording.
Other key features of state-of-the-art screen recording
software include the ability to capture keyboard input
during recording; to show keys pressed in playback;
and support for audio recording from a microphone or
sound file (MP3 or WAV format).
Show and Tell
Last, but not least, screen recorders have another re-
markable property: They have the ability to commu-
nicate across language barriers because they are, in es-
sence, a modern-day equivalent to the show and tell
method of learning.
Martin Green said: As the web continues to grow, so the
uses of screen recorders have evolved. For instance, the lat-
est use for BB FlashBack Express is in the production of
screencasts.
A screencast is a digital movie in which the setting is es-
sentially a computer screen and where the action (usu-
ally narrated) takes place between the mouse pointer
and whatever is on the screen.
Screencasts seem to have captured the public’s imagina-
tion for producing short web-based movies and sharing
information, Martin Green said. With the right soft-
ware, it’s easy to make and share screencasts, perhaps
showing friends how to use a favourite software appli-
cation, or demonstrating to developers where one is go-
ing wrong. Because screencasts are so small, almost any-
body can create one, blog it, and make it discoverable
by search, tagging, and word-of-mouth referral.
In our own experience, we’ve discovered we can save
time by mailing colleagues a quick FlashBack movie
instead of trying to explain how to do something on
their PC. The situation can be even more difficult when
you’re working with a team of people and trying to ex-
plain what’s happening on the screen by e-mail or over
the phone. BB FlashBack makes certain everyone gets
the same message.
BB FlashBack Express – the little brother of BB Flash-
back – has all the acclaimed recording and playback
functionality of BB FlashBack, minus the tools for en-
hancing and editing your recording, and it’s ideal for
producing screencasts.
It features a variety of recording methods, thumbnail
previews for easy navigation, Media Player style con-
trols and navigation, and playback at 1/2, 1/4, 2x or
4x speed.
The program’s easy-to-use interface makes it simple to
record spoken commentary whilst recording the screen,
or to add a soundtrack. Select any portion of the screen
for recording (full desktop, a window, or a region).
Users can even review their recording frame-by-frame

.psd starterkit 2/2007 27


web design

with the VCR-like movie player. And when the movie


is finished, the work can be exported as an industry-
standard AVI or Flash file to ensure it reaches the widest
possible audience.

BB FlashBack Express Features


Recording
• Record and replay movies of your screen,
• Ultimate-performance FlashBack recording
technology,
• Record commentary through microphone,
• Capture all sounds played by PC,
• Auto-setting of Windows graphic effects for best
file size and performance,
• Record full desktop, a window, or a region,
• Hide desktop icons while recording,
• Hotkey control,
• Record continuously and save only last few minutes.
Playback
• Thumbnail previews for easy navigation,
• Playback at 1/2, 1/4, 2x or 4x speed,
• Search through movie for text,
• Media Player style controls and navigation,
• Zoom function,
• Share and send movies by email,
• Keystroke display.
Exporting
• Export to Macromedia Flash,
• Export to AVI,
• Full control over export file size and quality,
• Media Player style controls embedded in Flash
exports,
• Range of playback control designs for Flash movies,
• Create/edit HTML templates for web-ready
movies,
• Set custom frame rates,
• Export sound to MP3.
Hardware Requirements:
• Processor speed : 300Mhz Required, 600Mhz
Recommended
• Memory: 128Mb RAM recommended
• Display: Super VGA (800x600) or higher
resolution
• Graphics card : 4Mb video memory required, 8Mb
and above recommended to over 170 countries around the world and is in
the process of developing a global distribution
Software Requirements: and reseller network,
• The BB FlashBack range of screen recording soft-
• Recording – Windows 2000 or Windows XP to ware combines ease-of-use with sophisticated new
record in the highest performance mode, technology. Its versatility across a range of industries
• Playback – DirectX 7.0 is required to play back makes it an ideal learning tool, especially in IT sup-
movies, port, Sales and Marketing, Education and Training
• Export to Windows Media Video (WMV) – in fact in any application where users want to
– Windows Media Player 9, record and share on-screen events and procedures,
• ENDS – 1000 words approx. • BB FlashBack Express – normal retail price
$39.00,
Notes for Editors: • Upgrade to BB FlashBack from BB FlashBack
Express – $160.00 (normal retail price $199.00),
• Blueberry Software, headquartered in Birming- • Example movies created with BB FlashBack
ham, UK, is a leading provider of advanced can be found on our website at: http://www.
screen recording software to the international bbflashback.com.
market. In 2005, total downloads of BB Flash-
Back exceeded 330,000. Blueberry currently sells by Raspal Chima

28 .psd starterkit 2/2007


web design by Chris Wizner

Giggles Nightclub
Website

Creating websites is always a fun and creative challenge. The design alone for a profession-
ally designed website typically takes between 5-10 hours. It all begins with a combination
of the right concept and the right photos. With Giggles, they had no quality photos to work
with so Vivid Candi had to come in to their club and shoot custom photos. It turned out to
be well worth it since the final result was an amazing website that showed off the club at it’s
best. Everything else was easy to create once we had the right photos. Concepts just flowed
from there and we ended up with the idea that the disco ball would be the main naviga-
tion and page transition for the entire site. Then we decided to animate the lighting effects
you’d see in the club in Flash so that the site really came to life.

30 .psd starterkit 2/2007


giggles nightclub website

01 Create a new file 04 Canvas


Our first step in creating the Giggles nightclub Then we copy our chosen photo into the middle of
website was to create a new photoshop file sized at our website’s canvas in photoshop. We size it keeping
1024x768 pixels with a resolution of 72dpi. This size in mind that we’ll apply a border which can expand on
is the current average trend amongst most computers so higher resolution monitors.
we know our site will look great for the majority of visi-
tors. Also, note that all websites should be designed at
72dpi since that is the resolution of your screen.

02 Browse a library 05 Contrast


Next and most importantly, we browse our photo li- Next we copy our outlined star background from Il-
brary and pick the most appealing photo to make a lustrator into our photoshop file below the photo we
first impression on visitors. We selected an overall bar already added. We then apply a layering effect using a
scene that was unique to the club. black gradient so that the watermark appeared to fade
out at the bottom of the page and was subliminal rather
then distracting. We also filled the background with
black so our layout had contrast.

03 Background 0 6 Disco ball


Then we decide we’d like a unique background that Next we re-opened the original bar photo so we could
would use outlined stars which you’d see moving on grab a disco ball seen in the shot out at a high resolu-
the floor of the club with their lighting effects. We cre- tion. We carefully selected the disco ball and pasted it
ate these stars in illustrator and apply a 20pt Flat brush into it’s own document so we could meticulously edit
stroke to them to give them unique edges. the edges with an eraser to prep it for pasting into our
website layout.

.psd starterkit 2/2007 31


web design

07 Higher resolution 10 Copy merge function


We then pasted our separated high resolution disco We copy and paste our border using the copy merge
ball into the website layout at a higher resolution function [control]+[shift]+[v] as one layer into our
over an existing low resolution version of the disco ball. website layout and size it to fit the edges of our main
We did this so it’s more eye-catching and obvious. We photo.
also apply a layering effect of outer glow using a light
blue color so that it appears to reflect light.

08 Special effect brush 11 Logo


Next we create another blank canvas at the same size We open our clients provided logo file and then paste
as the website layout so we can experiment with bor- it into the website and use the transform tool to size
der concepts. We eventually used a special effect brush it correctly. We also use the color overlay effect to turn
that comes with photoshop sized at 20-30 pixel size their logo from black to white. Since their provided lo-
and drew a straight line in purple. The result was a very go was rough, this technique helps to make it crisper.
unique circular border. We place the logo in the top left.

09 Border 12 Copyright
We continued creating our border by copying a layer We create a copyright and design credit notice in
of the circular line and using the transform tools to small 8pt arial font as follows: 2006 Giggles night
rotate it appropriately to create a square border. We had club. all rights reserved. Design by Vivid Candi. We
to use the [control]+[X] command to cut excess pixels place this in the bottom. Copyrights are a must for any
on the sides. professional website.

32 .psd starterkit 2/2007


giggles nightclub website

13 Mock navigation 16 Flash


We type in a mock navigation as one layer of text in Then we go to File, then Save for Web and save it
photoshop using the Futura XBlk BT in all caps. into a folder we call Flash Library which contains
all support elements needed for the Flash website. We
repeat step 15 and this one to any other graphical ele-
ments on the layout.

14 The curves 17 Swift 3D


We decide the navigation will look best if it follows We then use a program called Swift 3D to render a
the curves of the disco ball. We apply the warped disco ball animation. Then we export that to a .swf
text effect in the text tool to shape our text around a file so we can later import it into Flash. We then import
sphere. Then we use the transform tool to reduce the all exported individual graphic elements. From there
size so it fits around the disco ball. we spend another 10-15 hours animating lighting,
photo swaps, transitions, page content, navigation and
much more until the site is complete.

15 Complete layout 18 Live and complete


Our layout is now complete in photoshop. Now we Then we decided to animate the lighting effects
move on to preparing files to go into Flash. We start you’d see in the club in Flash so that the site really
by separating the main photo of the bar by selecting all came to life. Our website is now live and complete at
and then copying and pasting it into a new document. www.clubgiggles.com/home.html.

.psd starterkit 2/2007 33


WEB DESIGN

Web Designing
the Art, Science & Philosophy

Web designing may not have fixed rules and regulations or code of ethics but it surely has some time tested pa-
rameters that you can safely follow to make your site widely accepted on the net. Please make a note that we are
talking about the simple personal web site and not the huge corporate or business webs. While designing the web
the first thing should come into your mind is your subject and target visitors. Please always remember that web
designing is an art deals on the principle of psychology. It’s not only your web site but hundreds and thousands
of options available to the visitors hence you must have something which will attracts and make him come back
again and again. So the first aspect to work out while designing the website is visual appeal. For this you need
to have an idea of the subject and the target visitors as we mentioned above.

If you are designing the website of an artist, you can est of the visitors at the same time will take less down-
assume that mostly the target visitors will be from the load time.
same field or the people who knows about that art. Let The home page of the site is the entrance of your web
us say you are designing the site of painter. The site and you need to be extra careful while designing this
may not be necessarily fancy but it should reflect the layout as its going to create the first impression of your
environment, colors and placement of the objects suit- web site. For home page, you have to take two main
able for the subject. It should not be necessarily packed aspects into consideration, i.e. design and loading
with heavy images that will take lot of time to down- time. You have to maintain the balance between this.
load but may be with the tactful addition of galleries There are people still leaving in the old times saying
with thumbnails that are sufficient to arouse the inter- home page should have just one image maximum and
web designing

it should download within three or five seconds etc. ing the designing of your liking and requirement and you
Though it is true that homepage should download fast are done. Now you just need domain name, web space,
but you must understand that internet speed has also user name and password and you are on the net. Attrac-
increased as compared to old time’s modems and net tive ready made features with the ease of use made Front
connections hence you can add bit more to spice up page popular among the designers who are not much in-
your home page rather than keeping it dry to download to web programming. Many of the features that require
with the lightening speed. programming skills are taken care by Front Page with
Making secondary page is a matter of consistency. You their Components. You can even design a working guest
can not keep on changing the design of the pages within book, feed back forms with no programming skills. Ban-
the same web. The colors, and other objects, like but- ner ad manager will change the pictures automatically. It
tons; banners should have consistency throughout the has provided fancy hit counters, automatic thumbnails
web. Clean navigation is absolutely essential part of the and lots of mouth watering facilities for novice. So this is
good web site. Confusing navigation may be the big turn a sure choice for the beginners or the people who do not
off! Adding flash, other animations, java applets, videos, want them self to be in the mid of the coding.
audio files and scripts is a matter of choice and necessity. This obviously comes up with its own limitations. You
This again depends on your subject. It is said that serious have little scope of changing and customizing the envi-
visitors are not much in favor of the site stuffed with ani- ronment. So you can not much alter the coding behind
mation but it’s also true that correct use of animation add the page. You have to play within the limits of the free-
lots of spice, taste and make the web alive. dom provided by Front Page. You need Front Page ena-
Web design needs the delicate balance of art and science. bled servers to upload the site which is not a problem as
Designer must be aware with the psychology of the visi- most of the servers come up with this facility.
tors. He may not be the expert but should the knowledge Here a person starts thinking of the option of Dreamweav-
of the subject he is working with. This will also help to er. It will not provide you anything readymade. But it will
develop the better relations with his client which will fur- provide you complete independence. It will allow your
ther benefited in the process of designing. style and your preferences with 100 % customizing abil-
ity. If you want to design the working guest book, you
Which Editors to use? need to know java script or asp or jsp. But if you are well
You must have seen Hello World display in the empty verse with any of these languages or scripting, then sky is
webpage that a beginner design using HTML tags. They the limit. In most of the companies, designing and cod-
use notepad in the beginning. There are some other html ing departments are different hence a designer will design
editors available in the market but we will discuss about the outer shell of the site and programmer start coding
two main editors widely used in the industry. They are with the application provided in the site with respect to
Microsoft Front Page and Adobe Dreamweaver. the design. Dreamweaver is a favorite choice of the peo-
There should not be any confusion in the choice between ple who are inclined to the programming, who want total
those two editors if we exactly know what we want. If a flexibility and the freedom of work.
designer is well aware with his requirement and his limi- Choosing the editor is easy but once selected it’s a bit dif-
tations, the selection is easy. Front Page is surely comes ficult to switch from one to another for the same web.
up will all Microsoft easy to use addictive features where Front Page will put its own hidden files that are essential
a designer really doesn’t need to do much if he is going for the working of its component. Both the editors have
for a simple web page. their own strong points. It’s up to us to decide the choice
Front page in fact comes up with the wizard that even a with respect to our requirements.
novice can run and come up with his personal web page
within few minutes. You simply need to go ahead with by Atul Thakur
the wizard putting all the necessary information, choos- 2007© Inside Images

ADVERTISEMENT

.psd starterkit 2/2007 35


web design

Favicon.ico
A Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser. And
when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one.

All you need to add a Favicon to your site is a Windows


Icon (.ico) file called favicon.ico that you upload to the
main directory of your website.
Download The Plugin
You'll need the Windows Icon (ICO) file format Pho-
toshop Plugin to export to the .ico file format. You can
download the plugin from Telegraphics. The plugin
reads and writes ICO files in 1, 4 and 8-bit Indexed
and 24-bit RGB modes, and also reads and writes 32-
bit XP icons (with 8-bit alpha channel). Make sure to
install the plugin before you begin this tutorial.
Let’s Begin
Because 16 x 16 is such a small canvas area, it can be
very difficult to be creative. So instead start your project
with a canvas set at 64 x 64 (always use even multiples
when you plan on resizing files). Do this by selecting
File>New, and opening a new canvas that is 64 x 64 the head section of each page on which you want the
pixels in size. Favicon.ico to appear.
Here is the link code to include:
The Design <link rel="Shortcut Icon" href="/favicon.ico">
If you already have a logo you should reduce it to the Once you've added this code, upload all of your modi-
16 x 16 size to see if it holds up. If it doesn't look good fied pages.
at this size, work with the 64 x 64 canvas and try creat-
ing a simple design that incorporates colors from your Testing
website's palette. If your new Favicon does not show up right away, try
When you're ready to test the design select Image>Image refreshing the page – or put a ? at the end of the url,
Size menu and enter 16 x 16. Click on Resample Image which will trick a browser into thinking the page is new
and choose Bicubic Sharper from the drop-down menu and not cached.
(CS only for this step). This is the best setting for mak-
ing sure that an image doesn't blur as it's being re- Troubleshooting
sized.
If you feel the icon is not quite what you wanted, just • Browser Issues : Microsoft IE 6 for Windows will not
keep tweaking it until it is perfect. At this tiny size it can display the favicon until the URL has been added
take a few tries before you get it right. to the favorites, and Safari for the MAC will not
display an updated favicon until the browser cache
Saving The Custom Icon has been cleared. But choosing empty cache from
Go to File>Save As and make sure you name the file the menu won't help because Safari stores favicons
favicon.ico. Under Format you must choose Windows in a separate cache. You must empty the icon cache
Icon (ICO) from the pulldown menu. This format will yourself. Look for it in User >Library >Safari>Icons,
only be available in Photoshop after you download and
install the plugin. In the next step you'll need to upload • File Format Not Available : The Windows Icon
this new file to the root folder of your website, so it's (ICO) file format will not be available until you
a good idea to navigate and save it to that location on have downloaded and installed the plugin, and
your hard drive now. then Quit and Restarted Photoshop.
Uploading The Favicon.ico File Inspiration
Connect to your server and upload your Favicon.ico file If you need some inspiration have a look through this
to your website. You must place it into the same directory nice collection of favicons. Also look at the nice catego-
as your home (index) page, and leave it loose, making rized list of 50 remarkable favicons at Smashing Maga-
sure not to put it in an images directory or other folder. zine. You might find something that triggers an idea for
Some browsers will look for a direct link in the your own. That's it. Enjoy your Favicons!
HTML source code to your site's favicon.ico file.
You can help these browsers by adding this link in by Jennifer Apple for www.PhotoshopSupport.com

36 .psd starterkit 2/2007


web design

Website layout

Part 1 of the tutorial where I teach you how to create a full website template MickM.com-style! In Part 1,
I will discuss the creation of the template and where to put everything and where you should pay attention to!
This will teach you all the things you need to know about web designs and webdesigning!
Part 2 of the tutorial where I teach you how to create a full website template MickM.com-style! In Part 2,
I will discuss the slicing and coding of a website template. What you have to do when you slice a template
with ImageReady! Automatically convert your template into HTML!

38 .psd starterkit 2/2007


website layout

Step 1. This tutorial will teach you how to create a web- Step 2c.
site-layout, the MickM-way! Is this tutorial too hard,
but you want to have the layout? Download it from
www.mickm.com. First start out with a document of
800x600. I always choose for 800x600, because there
are still A LOT of people out there who have 800x600.
It is better to let you site be viewable for every user then
for a select group. Fill it with the color #CCCCCC,
and create a header-shape with the Rounded Retangle-
Tool; Right-click and select Make a selection; Fill it with
black.

Step 2a. Add these layer-styles to it Step 2d.

Step 2b. Step 2e.

.psd starterkit 2/2007 39


web design

Step 3. It should look like this Step 7. Create an even smaller rounded retangle and fill
it with a gradient (I used a purple one)

Step 4. Add some nice props to the header Step 8. Add this style to it

Step 5. Create a smaller shape with the Rounded Retan- Step 9. You can add some props to the actual header
gle-Tool

Step 6 Step 10. Create a rounded retangle beneath the header


(Make is small, but not too small – remember, you need
to fill this with text later)

40 .psd starterkit 2/2007


website layout

Step 11. Give it the same layer-style as with the first re- Step 15. You can choose if you want to add some props
tangle (Just repeat those layer-styles on this retangle) to it, if you want

Step12. You can choose if you want to add some props Step 16. You can choose if you want to add some props
to it, if you want to it, if you want

Step 13. Now for the main-window, create a rounded re- Step 17. Add the same layer-styles to is as the first re-
tangle again at the same way as you did before. Make sure tangle
it’s big enough for text. I’ve chosen larger then 300 px.

Step 14. Add the same layer-styles to is as the first retangle Step 18. Again, add some nice lookin' props to it

.psd starterkit 2/2007 41


web design

Step 19. You can choose if you want to add some props Step 24. Add the same layer-styles to is as the first retangle
to it, if you want

Step 20. Add the same layer-styles to is as the first retangle Step 25. Add the same layer-styles to is as the first retangle

Step 21. Add the same layer-styles to is as the first retangle Step 26. Again, add some nice lookin' props to it

Step 22. Again, add


some nice lookin'
props to it

Step 23. You can


choose if you want
to add some props
to it, if you want
Step 27. Again, add some nice lookin' props to it

42 .psd starterkit 2/2007


website layout

Step 28. Log off both Photoshop and Imageready and LINK LINK LINK LINK
go to the folder where you saved your site and change </TD>
image.html to index.html, because your browser will
always open the INDEX-file!
Step 34. Now for the iframe
Find the part of the coding where you sliced your main-
window;
<TD COLSPAN=5>
<IMG SRC=”images/image_02.gif” WIDTH=600 HEIGHT=600
ALT=””></TD>

Step 35. Change the TD-background to that image;


<TD COLSPAN=5 BACKGROUND=”images/image_05.gif”

Step 29. Open index.html Step 30. Then change this WIDTH=500 HEIGHT=100>
and change the following and you’re ready to code! </TD>
inside the source code
Step 36. Then add this code between the TD-tags;
Step 31.Now comes the coding
<TD COLSPAN=5 BACKGROUND=”images/image_05.gif”
Go to your source-code and find the image that you
WIDTH=500 HEIGHT=100>
sliced for your menu-bar;
<IFRAME SRC=”content.html” NAME=”iframe” FRAME-
<TD COLSPAN=5>
BORDER=”0” SCROLLING=”auto” WIDTH=”100%”
<IMG SRC=”images/image_01.gif”
HEIGHT=”100%”></IFRAME>
WIDTH=500 HEIGHT=100 ALT=””>
</TD>
</TD>

Step 32. Change the TD-background to that image; Step 37. All your links MUST have this in them;
TARGET=”iframe
<TD COLSPAN=5 BACKGROUND=”images/image_05.gif”
WIDTH=500 HEIGHT=100>
Step 38. And now you have learned everything that
holds the basics and the rules of iframe... ENJOY
Step 33.Now you can fill every possible link you need
between the TD-tags
by Mick Moolhuijsen
<TD COLSPAN=5 BACKGROUND=”images/image_05.gif” www.mickm.com
WIDTH=500 HEIGHT=100>

ADVERTISEMENT

.psd starterkit 2/2007 43


web design

Pattern background

This nifty tutorial will teach you how to make repeating pattern-backgrounds like
the one I am using for MickM.com. This tutorial will use standard shapes only!
Retro background just like the pattern I have made for MickM.com version 8.

44 .psd starterkit 2/2007


pattern background

01 Fancy Shapes 04 Division


First of all, let me tell you that for this tutorial, you Then go to Edit>Preferences>Grid etc. and choose the
don't need fancy shapes, because Photoshop allready options that will devide your document in 4( pieces.
has a large variety of shapes like the ones. I choose these options.

02 Create shape 05 Merge


Create shape with some objects. Your shape doesn't Then select (WITH THE GRID ON) the lower-
HAVE to look like mine, but it has to kinda fill the right corner and place it in the upper-left corner. Do
square space. Once done, merge all the shapes together the same opposite-pasting with all corners. Then select
and downscale it using [CTRL+T]. Time to turn on the all corners and merge them together. The downscale
GRID with [CTRL+']. them and place them in the middle. Make a selection
around it. With the selection on, go to Image>Crop.

03 Grid 0 6 Edit
Once the grid is on, you must center your shape just Then save it as a pattern by going to Edit>Define Pat-
by dragging it to the center. The grid will automati- tern and then later go to Edit>Fill and fill the layer with
cally center it. your new pattern and use it whereever you like!

.psd starterkit 2/2007 45


web design

Deconstructing
delpadre.com

I get a lot of emails from around the world with one simple question I love your
website, how did you do it? or How did you do this or that in Flash Well this sim-
ple question unfortunately does not have a simple answer however I will attempt
to outline the basic workflow and techniques used to create the site. A site like
this usually takes several programs to create. In this case I used Adobe Photoshop,
Adobe After Effects, Adobe Flash and Autodesk Maya. I will outline the basic steps
in creating the Del Padre Visual Productions 5.0 Flash site.

46 .psd starterkit 2/2007


deconstructing

01 Create the site layout in Photoshop 04 Start a new after FX comp


After you plan out your site structure, links, pages The next step is to create the animation of the inter-
and colors you can start creating the mockup in Pho- face in Adobe After FX. I am using several Plug-ins
toshop. I created the interface with Photoshop’s Free- by Trapcode (www.trapcode.com) Starglow, Shine and
form Pen Tool, Vector shape tools and layer effects like Particular. Create a new After FX composition the same
bevel, satin and gradient overlays. I started creating and size as your interface image. Import your interface png
transforming primitive shapes to create a slick looking and add it to your new composition.
interface.

02 Building the interface 05 Animate the Starglow mask


Continue to create sections of the site to accom- Play around with Starglow until you get the look you
modate your navigation and content areas. I added want. I am using Luminance as the input channel and
shapes with a pillow emboss to create more depth to the I checked the use mask button. I animated the mask ra-
interface. I set the layer fill transparency to 0% and set dius, feather and position to animate the interface from
the pillow emboss to smooth, depth to 1000, direction the top right of the screen clockwise. I also keyframed the
down, size of 1 and an angle of 14 degrees and an alti- Threshold, Streak Length, Boost Light and the Opacity to
tude of 48 degrees. achieve the final effect. To keyframe attributes in After FX
you click on the clock icon and set your value at say the
first keyframe and then move to the frame 30.

03 Cut it out 0 6 Add Trapcode Starglow


After you have all of the elements for your site in Add Trapcode Shine to your composition. Try some
position you should start exporting all the elements of the different presets under colorize. I used the
that you would like to animate in Flash separately. For heaven preset. I animated the Ray Length, Boost Light
Instance I wanted the interface to build itself during the and Opacity values. This ads an overall glow to the in-
intro of the site so I need to hide all the layers except the terface.
outer interface, crop the transparent areas around it and
go to File>Save For The Web and choose PNG-24 Pre-
set with Transparency Checked. Repeat this step for each
item like buttons, logo, etc.

.psd starterkit 2/2007 47


web design

07 Add some smoke 10 Create timeline and begin animation


Add a new solid by clicking on Layer>New>Solid. Center the video on your stage and place a blank key-
Click Make Comp Size and click ok. Add the Par- frame when the video is done playing once. On the
ticular pug-in by choosing Effect>Trapcode>Particular. next frame import your interface image you exported form
Choose a smoke preset and animate the emitter around Photoshop in step 3. Place it in the exact position on the
the outer edge of the interface. stage that the video is. This will give the appearance of one
smooth transition form the video to the still image of the
interface animation. Continue to import elements from
Step 3 into Flash on separate layers and animate them in
various ways.

08 Export the comp to video 11 Add sound Effects and action scripting
Now its time to export your composition to video so Choose some sound FX that fit your animation style.
you can import it into Flash. Go composition>Add to High quality sound FX are important and can be
Render Queue. Go to your render Queue and click on found in sound FX libraries like Sound Ideas (www.sound-
Output Module and choose QuickTime as the format, ideas.com) Time the sounds to your animation and choose
click on format options and choose none as the com- stream sound time as you want the sound to sync with
pression type and 30 frames per second. Click on OK, your timeline. Create interactivity for your buttons and
set your output folder and click render. timeline with Actionscript.

09 Import assets into Flash and create new project 12 Optimize and publish your movie
Create a new Flash project, set the frame rate to When you’re done with your scripting and testing it’s
30 and set the stage size to 1280 X 1024. Go to a good idea to optimize your Flash movie to make
File>Import>Import Video. Choose your After FX output the smallest possible file size while maintaining good
QuickTime and choose Embed video in SWF and play in quality. Make sure that your data rates on your audio
timeline. Choose Embedded video. Choose Flash 8 High are not too high and that your image quality setting are
Quality (700kbs) preset, choose next and finish. The vid- set high enough to look good but not take up too much
eo will start encoding and will appear on the stage when file size. That’s it! This is a very broad tutorial but get
completed. a look at the workflow. The most important thing is to
have fun!

48 .psd starterkit 2/2007


web design

Uncool
is the new cool
Many websites of advertising agencies, design studios, fashion artists, contemporary art galleries and musicians deal
with aesthetics that could be branded as uncool. TheUncoolhunter.com shows how the paradigm of those things
that were considered cool or trendy is mutating into the uncool or the anti-aesthetic fashion.

The latest ad launched by Nike that shows the Brazilian


star Ronaldinho allows us to listen to a copywriting jewel.
In the spot, the soccer player is asked: What do you do when
the entire world is looking at you? He answers: You make them
look the other way.
The new gurus of communication, facing a world that is
eager to look for new gadgets, trendy and net styles, mini-
malisms, fashion postures and website designs that are
considered mainly institutional advertising, offer a radical
change. Nowadays badly chosen typographies, unexpected
color combinations and deliberate baroque designs lead to
endless aesthetics mistakes that were unimaginable some
years ago. In this setting, the uncool turns into cool.
A tour of this new shape that adopts the chamaleonic cultural
machinery that generates information, lifestyles, objects and
consumerisms takes us to observe the look of the institution-
al communication of the Art Directors Club and two ad-
vertising agencies that are said to be leaders in breaking the Figure 1. Art Directors Club annual call for entries
mould. Let’s start with the case of the prestigious Arts Direc-
tors Club. Its website invites advertising market to submit
works in the 86th edition: with rough illustrations it com-
municates the deadline of presentations with a pretentious
apocalyptic touch and with an obvious ironic twist.
The case of Kessels Kramer is paradigmatic. This agency,
located in Amsterdam, is the creator of the rupturist glo-
bal communication of Diesel, whose main characteristic
is the eclecticism. In order to demonstrate it, its website
allows the surfer of the unfathomable waters of the cyber-
space to get to a different mini site each time he/she presses
the refresh button of its browser. Owners of a subprofes-
sional design, the different mini sites (a supposed site that
sells hot-air balloons and another site that explains how a
transistor radio is manufactured, just to mention some ex-
amples) present the different works of the agency. In this
way, an implicit pact is made with those who are experts
on this subject.
A similar case is the launching of the web that belongs to
the advertising agency Madre Buenos Aires. This agency is
the argentinian office of Mother London. Its site is full of a
cheesy space mysticism and its brand isolotype shows as a
cow standing as a heraldic horse.
Madre makes it possible and that isotype method really
transfers empathy, not frivolous thoughts and an anti-he- Figure 2. KesselsKramer website

50 .psd starterkit 2/2007


uncool

Figure 3. Madre Buenos Aires Figure 5. Cassette Playa fashion designer

Figure 4. Cassette Playa fashion designer Figure 6. Outlaw Print Co. T-shirts

Figure 7. Save Ugly Country website

Figure 11. Trash-Fashion website

Figure 8. El Jardin Design Studio Figure 12. The Klaxons website

.psd starterkit 2/2007 51


web design

Figure 13. The Klaxons website Figure 9. Appetite Contemporary art gallery

Figure 14. Dick el Demasiado, experimental cumbia artist Figure 10. Trash-Fashion website

Sites to visit

Advertising
Art Directors Club
– http://www.adcglobal.org/86CFE/index.html,
Kessels Kramer – http://www.kesselskramer.com,
Madre Buenos Aires
– http://www.madrebuenosaires.com.
Fashion
Cassette Playa – http://www.cassetteplaya.com,
Outlaw T-shirts – http://outlawprintco.com/,
Instituto Europeo di Design (Save Ugly Country)
– http://www.saveuglycountry.com/. Figure 15. The Raconteurs D.O.S. look website

Design Studio
El Jardín – http://eljardin.tv.
Art Gallery
Appetite – http://www.appetite.com.ar.
Music
The Raconteurs – http://www.theraconteurs.com/,
Trash-Fashion – http://www.trash-fashion.com/,
Klaxons – http://www.klaxons.net/,
Canalcumex – http://www.canalcumex.com,
Dick el Demasiado
– http://www.periferico.org/dickeldemasiado/.

52 .psd starterkit 2/2007


uncool

roic position that is full of sincerity. This hidden motive machine gun and a tuned car decorated with flames that
is complete when a thunder reveals that its website is a can be seen along its structure. When entering the site, you
fiasco. find banners that show satanic furious dogs and endless
Now, let’s take a tour around the world of fashion. The novelties and pictures floating on a hazardous sea of un-
top English designer Carri Mundane a.k.a. Cassette Playa controllable chaos.
offers us a hallucinogenic world in her website. Its design Let’s talk about music. The East London band, Trash-
overloaded of irreverence, contains hyper-vibrating colors Fashion, invites us to a site where the post 80s aesthetics
and a hysterical electronic sound. It’s the abundance of prevails. This band whose style ranges from Guntronic to
fluorescent trash. Disco, Rave and Rock is said to be one of the leaders of the
The Outlaw Print Co. t-shirts is a brand located in Phila- new aesthetics of the new grave culture.
delphia. Most of its pretentious designs takes the fantasy In the same tendency we can mention the English new-
art style and epic surrealism. The contribution of colors rave band The Klaxons. Its web uses optical psychedelics
such as violet, fuchsia, and the a variety of fluos refer to the where low resolution .gif pics are used in a deliberate way.
anti-aesthetic 80s decade. The esoteric collage and the magical surrealism are just
The European Design Institute of Sao Paulo, Brazil created some of the anti-aesthetics aspects offered by The Klax-
the site Save Ugly Country to promote the institution. The ons for this new tendency that is the standard bearer of
site presents a fictitious country, Shantsu, in a humorous the no-art.
tone and a kitsch style. Its most outstanding characteristic In the other hemisphere, the Dutch Dick el Demasiado
is to be the ugliest country in the world. In several videos, (Dick the Too Much) is leaving in Buenos Aires. He is one
one of its inhabitants urges the students to send design of the pioneers of the Experimental Electronic Cumbia
products that can make the country look prettier and save tendency. His website, together with the one belonging to
it from supreme ugliness. Canal Cumex shows a design that offers a new vanguard
The design studio El Jardin is located in Buenos Aires. In of the anti-aesthetic.
an ironic way, its site presents a mix of call to action design In the mainstream there are also several examples of web
by taking reminiscences from instruction manuals of the designs where the 80s retro is nowadays fashionable. The
50s. With a slight twist, the browser understands that pre- Raconteurs, the band of Jack White, ex singer of The
tentious phrases such as discover the power of communica- White Stripes, offers an aesthetic based on the operating
tion, made-to-measure solutions or Success cases are an accu- system D.O.S. where the user has to get to the menu by
rate irony to all the clichés of corporative communication. using the keyboard and not the mouse. These are the new
In the other hand, the site of the contemporary art gallery shapes that cultural industry adopts to stay fresh. So, we
Appetite Buenos Aires presents a pixelated wallpaper that ask ourselves: uncool is the new cool? And the creativity
shows a repetition of photographs of a hamster holding a gurus answer seems to be: Yes!

ADVERTISEMENT

.psd starterkit 2/2007 53


web design

Interview
with 352 Media Group
At 352 Media Group, they aren't typical Web design company. With a staff of almost 50 people, they have the ability
to dedicate an entire team of specialized professionals to each of our custom Web design, Web application development,
CD and DVD production and motion graphics projects. They serve clients in every region of the country through our
Web development production offices in Atlanta and Gainesville, Florida, and our Web development sales offices in
New York, Los Angeles and Seattle. Their numerous professional Web design awards (14 Addy Awards in 2006!) and
their unique team-based approach to custom Web development set them apart from other professional Web design
companies. As a full service interactive agency, they offer a wide range of award winning services, including Web de-
sign, ASP.NET Web application development, Intranet and Extranet development, Web marketing, Flash animation,
E-commerce, and more.Their breadth of interactive services and their 10 year record of success set them apart from
other Web development companies and interactive agencies.

Please tell us something about your agency and the way


you work.
As our company has grown and evolved, we have con-
tinually improved our processes and raised our stand-
ards. Learning from our successes and failures has
allowed us to develop a really solid workflow. This has
been a key factor in our success.
Another great thing about our company is the culture. We
have a really wonderful atmosphere with amazing people
that are more like friends than coworkers. That fosters the
creative process. Our designers enjoy that collaborative
environment and the results drive that point home.
What is your formula for such successful designs?
That’s a tough question since there are countless factors
in creating successful designs. The real key is under-
standing how your client defines success. Our designs Figure 1. 352media homepage
have been successful because we strive to create work
that solves the client’s unique design problem.
Do you have a special philosophy that you stand for in the
company?
Yes, we try to add value in every project we do. That
may mean creating something that saves our clients’
money by doing things more efficiently online or by
opening up new revenue streams. It’s really all about the
customer’s ROI.
Are there any inseparable character features that a graph-
ic designer should have?
It may sound obvious, but I can’t overstate the impor-
tance of raw talent. Any designer can improve their skills
by learning about design principals and participating in Figure 2. 352media inner
critiques, just like any singer can improve their voice with
lessons. But you can’t learn raw talent.

54 .psd starterkit 2/2007


interview

What are the major rules while building a new website for
your client?
You need to understand the client’s needs, work to create a
solid plan that meets their needs and execute the plan.
Please tell us about your biggest web design project, big-
gest campaign. How did the creating process looked like
and which project it would be?
It’s really hard to pick one project as the biggest. One
recent project that we’re extremely proud of is the Web
site for the Crest at 63 Wall Street in New York City. It
is a really modern residence with lofts and apartments.
They were looking for a modern site that fit with the
style of the building and its residents. As is the case with
all of our designs, we spent a lot of time working with
the client to identify their prospects to create something
Figure 3. Crest homepage tailored to them.
The site was developed predominantly using Macrome-
dia Flash. We tried to incorporate as much of the great
photography of the building as we could to compliment
the design.
The site recently won a best in show addy award, and
has opened the door for many other projects with the
building’s management company, Metroloft.
What is so special about you, the 352 Media Group and
your designs that you had won 44 addy awards for web
design? What is the secret of your designs?
Part of our success is due to our processes and an on-
going dedication to improvement. But the real secret to
our success is our insanely talented designers who fight
the good fight each and every day.
Figure 4. Crest inner You have been invited by Microsoft to Artists in Residence
Program. What does it mean for you?
We were honored to be chosen for such an amazing op-
portunity. It gave one of our developers a chance to live
and work on the Microsoft campus with talented devel-
opers from around the world.
Specifically it gave our team an inside look at the new
technologies coming out of Seattle. Microsoft has been
playing catch-up in the motion graphics arena, but
from what we’ve seen they have used that time very well
to create a great suite of design tools. WPF/e has a lot of
great answers and will be something we will continue to
take a hard look at.
If you were to advise young web designers. What should
they focus on, what would it be?
I would advise them to be proactive about building
their portfolios. I see a lot of young designers with the
Figure 5. Ipanema homepage same dilemma: limited work experience and only a few
school projects to use for their portfolio. They should
consider redesigning existing Web sites to show a poten-
tial employer how they would improve them.
by .psd Team

Figure 6. Proximiti homepage

.psd starterkit 2/2007 55


faq tips and tricks

Top 10 best practices


As this issue focuses on beginning web design I thought I more productive and less frustrating sequence was needed and
would present you with the top ten best practices my team we learnt that using Photoshop to present our customers with
and I have learned and developed into practice over time. a concept first was the key.
These may not be true for every instance; however, they Now things are different. We plan our web sites and create
should be incorporated in one way or another into every the artwork in Photoshop well before we even think about
project and they are probably best completed in the order pre- Dreamweaver and as a procedure we ask our customers to give
sented. It should also be known that these ten tips could be their approval and sign off on the concept first. The proto-
expanded on to create a set of house rules and this is what we cols are tight and this sign off step is imperative. Without it
apply at Web Design Magic. customers tend to take advantage of an open ended concept
Unfortunately, this following example illustrates how Web and quite often you end up working on the same website for
Design Magic has learnt the hard way. months making changes.
When we were starting off the first program we opened for There are plenty of other important guidelines we have
a site development was Dreamweaver. We then proceeded to worked on and with over the years and here I share with you
place tables all around the place only to find out weeks later what we consider the top best practices that we feel help keep
that the design was flawed or the customer did not like the ourselves above our competition. Remember anyone looking
look and feel. So, we then scrapped it and started again! A can see your coding with a simple View Source command!

01 Plan, plan and plan some more


Here, we are not only talking about a site map. We are talk- using long wordy pages that will never be read. They want char-
ing about the blueprint for the site. Even if it is complex acters, sounds, movement – all the bells and whistles. On the
ASP.NET site or a simple 10 page HTML site you still flip side, if you were targeting customers looking for legal advice
need to plan. Ask the questions that will help you build a then long wordy pages with printable PDF’s would probably be
picture of the website so that you can move forward and more appropriate. Keep in mind too that customers know their
build the customer the site they have been looking for. markets better than you do so always listen to them.
This will take practice but good open lines of communica- You must plan the site around the targeted audience otherwise
tion and clear and structured ideas are the key. This cartoon you may loose the potential customer. With so many busi-
I found on the Internet, below, best describes the prob- nesses on the internet your site is simply a click away from its
lem area faced when trying to figure out what is required. competitors.

03 Use CSS
CSS (Cascading Style Sheets) is a style sheet language used to
describe the presentation of a document written in markup
language (HTML). The CSS specifications are maintained by
the World Wide Web Consortium (W3C). CSS is used by
authors of web pages to define colors, fonts, layout, and other
aspects of document presentation.
In simple terms, CSS if implemented the correct way will
allow you to easily setout your HTML in a way standard
HTML would never allow. By designing your sites around
W3C CSS standards you will also increase the chance of
your website looking the same across different browsers
and platforms. W3C has some fantastic articles on CSS
and how you should implement them in your site. (http://
www.w3schools.com/css/default.asp).

Figure 1. Examples of different personal views of the same solu- 04 Validation tools
tion Just as texts in spoken languages have variations, so do
markup languages. One of the more known culprits would
be the HTML that is written by Front Page. It adds is own
02 Know your audience markup, which makes website building easier for novices,
You really need to discover the audience for which the new however, some of this markup cannot be read by non Micro-
website will be intended. This should be one of the first ques- soft web browsers. To ensure that your site can be read and
tions asked and the target market established from the very be- rendered correctly by as many browsers as possible test your
ginning. If you’re targeting young children then it is pointless site against W3C validation rules.

56 .psd starterkit 2/2007


faq tips and tricks

By using Adobe’s Dreamweaver or a similar prod-


uct you can compare your code to several standards and
you can use code validation to pinpoint problem ar-
eas in certain pages or a complete site. You will find
that Dreamweaver has a great range of validation tools.

Figure 2. Using Dreamweaver to validate your code

05 Learn how to use your tools 08 Recycle – Using SSI


Just because you own a great set of chisels does not mean When you build your site you may wish to investigate SSI
you’re a great carpenter. (I have tried to explain this to my (Server Side Includes). SSI is primarily used to paste the con-
wife many times!). This goes for your web design tools as well. tents of one or more files into another. For example, a file (of
By mastering your tools and through constant self training any type, .htm, .txt, etc.) containing a daily quote, could be in-
you will be freeing up time to complete the more exciting cluded into multiple SSI Enabled pages throughout a website,
parts of web design instead of constantly coding mundane by placing the following code into the desired pages.
plumbing code like rollovers or image pre-loaders. Investigate <!--#include virtual=''../quate.txt''-->
code snippets and extensions. Again Adobe’s Dreamweaver With one change of the quote.txt file, pages including the
comes with pre packaged code snippets and many extensions snippet will display the latest daily quote. Server Side Includes
are available on their website found at http://www.adobe.com/ are useful for including a common piece of code throughout a
exchange/dreamweaver Many years ago I can remember some site, such as a navigation menu, header or footer.
programmers boasting about how they could write HTML in
Notepad, but by the time they had written the code for two
nested tables with alternate coloured rows I had finished the 09 Spelling
whole page! However, having said that, I would always recom- What can I say! Ensure that your website does not contain
mend learning HTML first before going to a full WYSIWYG spelling or grammatical errors. This problem would have to
(What You See Is What You Get) editor. I learnt HTML by be up there with optimisation annoyances. Never assume that
using the split view on my HTML editor. As I built the page the content you have been provided by your client is correct.
graphically I could see the code being generated and I made Read it, spell check it and read it again. I know people who
sure that I understood most of it before moving on. have said But this is what I got from the customer…. Well the
customers are not usually copywriters and you are working for
them so the least you can do is run a spell checker over it or
0 6 Accessibility read it! After all, the site reflects your professionalism as well.
Web accessibility refers to the practice of making Web pages
accessible to people using a wide range of user agent software
and devices, not just standard Web browsers. This is especially 10 Training
important for people with disabilities such as visual impair- At Web Design Magic we believe we have an edge over our com-
ment. In order to access the Web, some users require special petitors because we stay on top of the cutting edge technologies
software or devices in addition to a standard web browser, or so that we can offer them to our customer. We are constantly
have specially designed web browsers. training our certified staff. Once a week we will all sit down and
Designing websites with accessibility in mind can often en- complete some sort of training, be it something one of the team
hance usability for all. Good design can also deliver easier ac- found during the week or a video module provided by a third
cess for automated software programs that read website con- party trainer. In this sort of industry it is pointless writing web-
tent, such as search engines. Adobe’s Dreamweaver also can sites in a form that is outdated, unsupported or simply redundant
help with creating accessible websites by provide reports and so keeping our skills above those of the pack is imperative.
recommendations for that purpose. You can also visit W3C Get your hands on magazines, join user groups or visit web-
to find out more information. http://www.w3.org/WAI/ sites. There is a plethora of information on the internet. http://
www.w3.org/
Well there we have it. The top 10 best practices as suggested by
07 Optimisation Web Design Magic. I hope that by applying these to your day
By far the most annoying aspect of surfing the web is down- to day web design tasks you will be adding ease and satisfaction
load speed. Everyone has come across a website that is either into the process for both yourself and your customers.
too heavy on the images or flash. This is not always an opti-
misation issue. It could be a server issue but nine time out of by Daren Hawes
ten it is the fault of the Web Designer.
Use optimisation tools to compress, test and simulate down-
load speeds and it is often the case of finding the mean be-
tween the images looking good and download speed. Slicing
images may not make the image download any faster, but
browsers can load multiple images at once so it appears that
the image is.
All of the leading packages now support fantastic optimi-
sation tools. Have a look at this Adobe technote: http://
www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14186

.psd starterkit 2/2007 57


web world

Worldwide Wide Web

Iferent
n the last few years the significance of web sites has
rapidly increased. Day after day one discover dif-
ideas, methods and techniques of creating eye-
template page then each page you create, you create
from the template. The web page template consists of
the logo, and navigation structures. You should clearly
catching oneb sites. see that the only difference between this page and the
What can make your web site so outstanding? No template is the text you are currently reading.
matter what you use: sound, animation, visualisation Designing a website require also that you are familiar
or graphic design it has to be unique, it has to whip with basic website layout and structure. A website is in
thousands of other competing websites. The question effect a folder or directory containing files (web pages,
is: how on earth to do it? images, scripts) and other folders. Website layout is
There is no one particular answer to that. You can about creating a structure for these folders and files
make it in at least thousand ways! and how they are linked together.
But each has to be more raving than the other. It is Although the actual layout of a website varies consid-
very important to design your site with web beauty erably depending on size and use they all follow some
and accessibility in mind! basic principles. Websites consist generally of three
While design is the art and process of combining indi- types of Web pages the home page, intermediate pages
vidual elements of design (lines, shape, texture, color) and content pages.
into a pleasing arrangment, Web Design is the art and Web pages are the fundamental building blocks of
process of creating and may involve both the aesthetics a website. A website is simply a collection of linked
and the mechanics of a Web site's operation. However, web pages stored on a web server. There are two as-
primarily it focuses on the look and feel of the Web site pects to a web page – technical (html, meta tags) and
– the design elements. There are thousands of ready non technical (copywriting and optimisation). You
elements, which definitely will save your time and ef- need to be aware of both aspects in order to make
fort. The point is to make it your own! The purpose good web pages.
of a templates is to remove repetitive work and provide Professionals say that what makes a good web site is
a framework for consistency. Templates are used when not just the technical knowledge & skills, but the pas-
writing letters, sending email, and of course, making sion in making it. Now we would like to present a few
web pages. The very first web page you make is the pages that are definitely full of passion.

58 .psd starterkit 2/2007


worldwide wide web

E ducation is your key to website success. Your web-


site is about making more money in less time;
streamlining the customer's journey toward making an
care in educating their clients so that they truly under-
stand the steps necessary to achieve their long term
development goals. From research, to quantifiable cus-
informed and confident purchase, or enquiry with your tomer tracking, their website design services will put
business. It is a powerful tool and if used correctly, can you in the driving seat of a Mclaran web1, with a highly
transform your business into an empire, but there are trained and experienced website consultant in the pas-
no quick fixes. It takes hard work and know-how. With senger seat, navigating you towards profitable results.
Final Design Studios on your side, the web will become
your friend and best referrer of business. they take great www.finaldesign.co.uk

PORTFOLIO

The brief was to design a website that was particu- The brief was to create a shopping website for an artist
larly animate and interactive. A website that could to be able to upload his own artwork, track which items
be expanded upon season to season. The goal was were being looked at, banner ad management system
to build a website that was more adventurous than with statistical information, e-mail management and
the average online experience. The client was also search engine optimization. The goal was to keep the
equipped with the means to upload their own cata- design so simple that it would not distract from the art-
logue of images with accompanying descriptions as work or photography itself and to ensure the search en-
and when they needed to. gines could easily index all pages of the site.
www.Rt-Hon.com www.StateOfTheArtGallery.com

.psd starterkit 2/2007 59


web world

The agency has been rewarded for the the Best Design. The Best Designs recognizes the best Flash and CSS web sites
from around the world. Websites are categorized by CSS or Flash and then by elements of the design.
www.ndesign-studio.com

PORTFOLIO

Best Web Gallery is a showcase gallery which feature http://www.ndesign-studio.com/flash/


the best CSS and Flash site.
http://bestwebgallery.com/

http://www.margotblanche.com/ http://www.portuguesefilmfestival.com/

60 .psd starterkit 2/2007


worldwide wide web

T alented. Cutting edge. Savvy. These are words


their clients typically use to describe their Web
design team. And now, they call them award win-
select their company because of their unique ability
to blend award winning Web design with dynamic
Web programming and powerful online marketing.
ning as well. their Web design company has won Their Web design expertise extends across many in-
32 Addy Awards for their exceptional Web devel- dustries. their Web design team has won awards for
opment and interactive work! They are a full serv- Web sites.
ice Web development company, which means they
offer much more than basic Web design. Clients www.352media.com

PORTFOLIO

www.crestnyc.com www.nextteq.com

www.lvhdstore.com www.marinersclubkeylargo.com

.psd starterkit 2/2007 61


SAVE $39.95!
Get your copy of .psd and save
$39.95 off shop prices

Free easy ways to order


• visit: www.buyitpress.com/en
• call: 1-917-338-3631
• fill in the form next to and post it

Why subscribe?
• save $39.95
• 6 issues delivered direct to you
• never miss an issue
su o
g r s cr r
b ffe
ea ibe
t r
.psd ORDER FORM
□ Yes, I’d like to subscribe to .psd magazine
□ USA $49 □ Europe 39€
Order information
(□ individual user/ □ company) Payment details:
Title I understand that I will receive 6 issues over the next 12
Name and surname months
address □ Master Card □ Visa □ JCB □ POLCARD
□ DINERS CLUB
postcode Card no. □□□□ □□□□ □□□□ □□□□
tel no.
□□□□
email
Expiry date □□□□ Issue number □□
Date
□ I pay by transfer: Nordea Bank
IBAN: PL 49144012990000000005233698
SWIFT: NDEAPLP2
Company name
Tax Identification Number Signature
Office position
Terms and conditions:
Client’s ID*
Your subscription will start with the next available issue.
Signature** You will receive 6 issues a year.

* if you already are Software Media LLC client, write your client’s ID number, if not, fill in the chart above
** I enable Software Media LLC to make an invoice

.psd starterkit and .psd ORDER FORM


speci
□ Yes, I’d like to subscribe to .psd and .psd starterkit magazine a
□ USA $99 □ Europe 89€ offer! l
Order information
(□ individual user/ □ company) Payment details:
Title I understand that I will receive 6 issues of .psd
Name and surname and 4 .psd starterkits within the next 12 months
address □ Master Card □ Visa □ JCB □ POLCARD
□ DINERS CLUB
postcode Card no. □□□□ □□□□ □□□□ □□□□
tel no.
□□□□
email
Expiry date □□□□ Issue number □□
Date
□ I pay by transfer: Nordea Bank
IBAN: PL 49144012990000000005233698
SWIFT: NDEAPLP2
Company name
Tax Identification Number Signature
Office position
Terms and conditions:
Client’s ID*
Your subscription will start with the next available issue.
Signature** You will receive 12 issues a year.

* if you already are Software Media LLC client, write your client’s ID number, if not, fill in the chart above
** I enable Software Media LLC to make an invoice
gallery

Version 8 of MickM.com... my website. For the


first time ever, I made my site enable color-
schemes so that users could set it to their fa-
vorite color. is method worked great, but was
also the layout that was ripped the most times.
Still, I’m still happy with the result. In every
color I did something differently. In all layouts,
I had different headers and footers which I drew
using the pen-tool to draw vector shapes.
In the green layout, I just basically drew myself
sitting in a desert oasis, while the blue layout
represented the way to my school I have to
travel by train every day. e orange layout was
a little impression of a large industral city with
helicopters flying. e yellow/orange layout was
supposed to look like a sunset somewhere in the
dunes of Holland. For the purple one, I wanted
a very creepy Batman-like mansion with an evil
moon and me flying off. e red one was per-
haps the favorite amongst my users. I’m a big
fan of Disney and I always wondered what it
would be like enjoying a sunset with some sweet
animals. Of course that’s a bunch of rubbish, but
the point was that each layout had to have his
own style. And that worked out.
I might use color-schemes in version 10 or 11...
gallery
review

Build Your Own Web Site Right Way


Using HTML&CSS
Want to build your very first web site, but not sure
where to start? Build Your Own Web Site Right Way is
the right address. This book is the easy to understand,
fun, and comprehensive guide to learning HTML and
CSS. It teaches web development from scratch, with-
out assuming any previous knowledge of HTML, CSS
or Web Development techniques. It concentrates on
modern methods of web design from the very begin-
ning. The author shows step-by-step how to build a
fully functional Website. The readers will learn to ap-
ply Web Standards to build Websites that are usable,
fast-loading, cross-browser compatible and accessible to
disabled users. After the lecture of this book you will
have enough knowledge to set out on your first steps
as a professional web developer, or you can simply use
the knowledge you've gained to create attractive, func-
Author: Ian Lloyd tional, usable and accessible sites for personal use. This
Publisher: SitePoint Pty Ltd. book is a hands-on guide that does exactly what it says
Pages: 488 pages on the cover. It's not a detailed design guide but rather
focuses on the basic techniques that anybody who's not
afraid of a little bit of hard work can acquire without
too much distress. What makes the book outstanding?
You’ll learn the latest fully standards-compliant, best-
practice techniques from the very beginning and in an
easy to follow way. To sum up: We highly recomend it!

Learning Web Design


A Beginner's Guide to HTML, Graphics, and Beyond
Niederst book covers HTML and graphics in depth.
With HTML, she teaches how to create a page, how
to format text, how to insert graphics, how to create
links, etc. The graphics section is rather the strongest
in the whole book. It is a perfect resource to explain
how graphics are edited for the Web. The author spends
some time on the basics of obtaining server space and
putting files onto a server – the very important aspect
which you can hardly find mentioned in different books.
Although this can be the most confusing part about get-
ting started in Web design. A big plus for that.
It's also a handy rough-and-ready guide to the sorts of
application software you might want to acquire if you're
getting seriously into web design. Niederst not only in-
troduces the major players among authoring tools and
graphics packages, but steps through her examples
more than once to show you how they work in, e.g.,
Dreamweaver and GoLive.
Author: Jennifer Niederst This book starts with the premise that you have no web
Publisher: O'Reilly Media development experience and you do not want to program.
Pages: 454 pages The book is divided into four parts that cover an overview
of web development, an html tutorial, graphics for the
web, and web site design. Within each section, a different
subject is addressed in every chapter. While each chapter
starts at a very basic level, enough material is taught to give
the reader a good start in each of the subjects. I particularly
liked the way style sheets and links were covered. The book
is replete with tips, illustrations, and code examples to as-
sist the reader. There are exercises to reinforce the informa-
tion for most of the topics covered.
Generally speking- very informative, written in chatty
style but with no loss of accuracy. Although a bit long-
ish the book covers in details the most confusing things
for web site beginners.

68 .psd starterkit 2/2007


review

Sitegrinder
Photoshop's role in the production of website content has
traditionally been the creation and exporting of simple op-
timized GIFs and JPEGs, or possibly animated GIFs and
banner ads. These standalone images or sliced up pieces
of larger layouts are imported into dedicated web design
applications such as Dreamweaver or GoLive, and the fi-
nal website – complete with HTML and hyperlinks – is
generated from that point. The last step is to upload all of
the images and HTML files to a server. The bad news is,
right-brained graphic designers don't transition well to the
left-brained world of HTML, XHTML, CSS, javascript,
etc.! So website design and execution is usually a team ef-
fort, with visual creatives, writers and backend coders all
contributing their separate parts – a sort of web design by
committee.
Enter Media Lab and their ingenious and empowering
Photoshop plug-in, SiteGrinder 2. For the first time,
Photoshop users can design and create entire function-
al, professional, standards-compliant multipage web-
sites from within the familiar comfort of Photoshop it-
self! If you understand the concept of Layers and Layer
Comps, you're already there. If not, it's a quick study.
Here's how SiteGrinder works
Fire up Photoshop and create a document appropriately
sized for web display. In my case, I used one measuring
about 820x650 pixels (slightly larger than US Letter) at
72 ppi. This size image will display in full on most any
resolution computer monitor. Next, let your imagina-
tion run wild! Since you're working in Photoshop, you
are not going to be constrained by the limitations of
traditional web design applications.
I began my design (a mock website showcasing the Lu-
cisArt plug-in) by choosing a nice scenic image, which
I faded into white using a transparency mask. On top
of that I placed a logo and another scenic, along with
colored rectangles where the nav buttons were going to
be, and added drop shadows. All of these images, along
with the header text, were flattened into my web de-
sign's single background image. You can see examples of
my design in the accompanying screenshots.
For each of the six remaining pages of the sample website, I The User Gallery page's Layer Comp is expanded so
followed this same approach to create the backgrounds, ex- you can see the individual objects in that comp.
cept for not adding the colored rectangles to those designs. Exporting the final website is as simple as choosing
To create their nav buttons with rollover states, I used two File>Automate>SiteGrinder 2. The various tabs of the
separate layers for each, labeled appropriately (aboutus-but- SiteGrinder interface allow further tweaking and manu-
ton, (aboutus-rollover, etc.). This layer naming trick is what al manipulation of your site as desired. Then click Build
enables SiteGrinder to assign proper functionality to each and sit back while your entire site is created.
layer. Layer name hints such as rollover and popup cause Perhaps you'll agree that SiterGrinder is a unique and ef-
that Layer to behave as you intend. Also, text remains ficient approach to creative website design as intended
text, and SiteGrinder automatically hyperlinks web URLs for designers!
and email addresses. And buttons anywhere in the design You can view and interact with my SiteGrinder-gener-
named according to the various Layer Comps are auto- ated sample web design at the Plugs 'N Pixels website
matically linked to those pages during output! (http://www.plugsandpixels.com/sitegrinder.html). An un-
See the accompanying screenshot of the Layers palette lockable demo is also available from this page. Media
for a visual of Layer Comps (labeled as little folders). Lab offers training videos and more detailed documen-
Each web page's images (background, image layers and tation on their own website.
text layers) are grouped into their own Layer Comps. by Mike Bedford

70 .psd starterkit 2/2007


review

Uniblue Registry Booster


Registry Booster is the safest and most trusted solution to clean and optimise your system, free it from registry errors
and fragmented entries. Through Advanced Error Detection Technology, Registry Booster automatically identifies
missing, corrupt, or invalid items in your Windows registry and dramatically enhances performance and general
stability. One mouse click and Registry Booster does the rest. And, using Registry Booster regularly keeps your PC
free from errors and from obsolete, unused or unwanted files.

Most computer users don't know about the Windows registry. This causes information gaps and increases the
registry, and the few that are aware of it usually don't chances of slowdown and errors. If it becomes too frag-
touch it. Over time, every computer builds up a large mented, eventually a size limit on your registry will be
mass of entries in the registry, simply by regular usage. reached, and you'll start running into serious errors and
Moving files around, creating shortcuts, changing your registry corruption. Uniblue's program will defragment
preferences, adding or removing hardware, and installa- your registry, organizing and compacting it for optimal
tion and uninstallation of programs all leave entries in performance.
the registry. Eventually, this causes a gradual slowdown Installation is easy, and the program takes up very lit-
in your computer performance, and greatly increases tle room. All aspects of the program run quickly, letting
the likelihood of errors and crashes in all programs, you scan, backup, clean, and defragment your registry
and even hardware. Only a very advanced and knowl- in a very short period of time. Setting it up to run and
edgeable user should ever attempt to touch the registry, changing preferences is very simple, although you can
which is why Registry Booster by Uniblue is a very use- always let it run whenever your computer starts, if you
ful program. prefer not having to scan manually. The help files are
Registry Booster provides a very easy way to identify surprisingly detailed, allowing you to either find an an-
and clean out unnecessary and problematic registry swer to a simple question quickly, or go in-depth into
entries. The interface is simple, allowing you to easily what the Windows registry actually is. It explains eve-
scan, repair, and defragment your registry. You can see rything very clearly, with helpful screenshots and easy-
your scanning and repair history, as well as restore older to-use navigation.
versions of your registry, as it backs up your registry be- Registry Booster doesn't contain an auto-update fea-
fore each repair session. Registry Booster scans and re- ture, but that is the only area in which I found it lack-
pairs a vast array of registry entries, including many that ing. The shareware version will fully scan your registry,
are typically ignored by most programs. It can target but will only fix fifteen errors. It is available on the of-
ActiveX sections, system drivers, file extensions, shared ficial site, www.uniblue.com, and the full version can be
DLLs, sound and application events, fonts, help files, unlocked instantly by paying online.
and more. Uniblue Registry Booster is compatible with Windows
How much you get from the program depends a great XP, 2000, and 98/Me for MSRP $39.95.
deal on how much you use your computer, and what
you use it for, but every PC user should find it useful. by Adrian McCanna
Someone who uses their computer only for, say, writing,
will not find it nearly as useful as someone who uses it
for art, media, and games, or most especially someone
who uses a shared computer. Things you wouldn't ex-
pect to create clutter in the registry, such as editing
a playlist of video or audio files, or having an instant
messenger program play a particular sound when some-
one messages you, actually do create a good deal of clut-
ter, which builds up over time. After using the program
to clean the registry, system startup times, certain pro-
gram load times, and some general windows manage-
ment (Add/Remove Programs, navigation of the Start
Menu) run faster. You may find that inexplicable errors
you recieved before will no longer appear after running,
as was the case with me.
Defragmenting your registry is an additional feature of
Registry Booster. Just like your hard drive, your registry
becomes more fragmented the more you use your com-
puter. If a registry entry is too large, it will be broken
up into smaller pieces and placed in empty areas of the

72 .psd starterkit 2/2007


in the next issue

Layers are one of the most useful features in Photoshop. Layers are
a relatively simple concept that increases the power and flexibility of
building images much easier.

So what exactly are Photoshop layers?


Next issue of .psd starterkit covers the basics of working with layers
in Photoshop:

l creating them, l transparency,


l moving them around, l opacity,
l hiding layers, l blending options.
l copying and deleting,

+ 2CDs full of new Photo Royalty Free, software trials,


video tutorials & many more...

Would you like to become an author or betatester of


.psd magazine?

Join us!
www.psdmag.org/en