Transcript week2_2 - J & C Consultants

Beginning Website
Design II
Week 2
Rough Draft
Photoshop Refresher
Website Layout w/ Photoshop
Rough Draft
• When constructing a Website
Rough Draft, make it as simple
as possible
• This will be a reference for
creating the PhotoShop layout
• For the example to the right,
you may be a little more
specific
– For Example, in “Navigation”
we could put the various
buttons we would include in
our site
• I will now demo a rough draft
on the board of my topic
website.
• Now let’s create our rough
drafts!
PhotoShop Website Layouts
PhotoShop Layout Tips
•Use Layers effectively, and when you create a new layer – make
sure to name it something so you know what it is
•Get a palette handy of the color scheme you are using
•Leave layers raw, do not rasterize any of them in case you want to
edit them later
Your Layout
• To create our layout in
PhotoShop
– First since we want to
mimic what it will look like
when it is a site, we will
create a new file with the
desired width and height
• If not sure, choose 800
x 1024 (pixels)
– Now start adding in the
layers of graphics and text
– Save the PSD version so
you can open it and edit
layer if desired
– When finished, Save For
Web… see the next slide
Save For Web
1.
Now we are finished editing our
PSD file inside Adobe
Photoshop CS3 we want to
export it to show other people
•
•
•
•
File  Save For Web… or use
Alt+Shift+Ctrl+S
Now you can export your layout
by choosing from one of the
presets and then modifying it
further, or just go with the
default
You notice that in the lower left
corner, there is a indicator for
the size of the image and how
long it would take to download
at 28.8 KBPS (dial-up modem
speed)
When are you ready to export
hit Save and choose the folder
and filename to save it to