Teach yourself web design photoshop

Click on the 'Create a New Layer' button on the layers palette next to the trash icon.. Now to create the illusion of a rounded edge, in the Layer Style window, select Inner glow.. Dupli

Teach Yourself

Webdesign

Photoshop

by Carlos Alemán

Published by Carlos Aleman

© 2014 Carlos Alem án

No part of this publication may be reproduced, stored in a retrieval system of transmitted in any form or by any means, electronic,

mechanical, photocopying, recording, scanning or otherwise, except

as permitted under Sections 107 or 108 of the 1976 United States Copyright Act.

Warning and Disclaimer

This book is sold as is, without warranty of any kind, either

expressed or implied While every precaution has been taken in the preparation of this book, the publisher and author assume no

responsibility for errors or omissions Neither is any liability assumed for damages resulting from the use of the information or instructions contained herein It is further stated that the

publisher and author are not responsible for any damage or loss to your data or your equipment that results directly or indirectly from your use of this book

Trademark Acknowledgments

All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized The Publisher and author cannot attest to the accuracy of this information Use

of a term in this book should not be regarded as affecting the

validity of any trademark or service mark

Photoshop and Dreamweaver are trademarks of Adobe, Inc.

iPod and iPad are registered trademarks of Apple Computer.

Windows is a registered trademark of Microsoft Corporation

CarlosAleman.com

Firstly, I’d like to thank you for purchasing this book You may find this a rather odd book in that it is written by an artist and not a technical person But if you prefer teaching yourself new things, you might also be artistic in your way of thinking Either that or you want to save money on courses

Instead of writing a long boring introduction, let us dive right into learning

to design a website I will assume that this is all new to you, so I’ll

introduce you to two Adobe® products, Photoshop® and Dreamweaver® Since you may not want to run out and buy the latest version, I’ll use older versions in

my examples I’ve noticed over the years that each new version adds

functionality, but doesn’t usually make drastic changes to the user interface,

so it’s never been that difficult to adapt to a slightly different look

However, it may help your resume to list the latest software Adobe® allows you to download free trials and/or pay on a monthly basis.

The Adobe® versions I will be using in this book is CS (Creative Suite) The latest version is CC (Creative Cloud) If you eventually decide to get CC, you’ll find that it is cloud based and will work alongside CS, and you can

backsave to CS formats You can even install prior versions from an archive starting with CS6 onwards With Dreamweaver® CC it is easier to design for multiple screens and devices as well edit CSS Photoshop® CC features smart sharpening and many other new powerful effects But for the purpose of

learning the basics of web design, the less sophisticated CS versions may be a good starting point

One thing I should mention first Websites require web hosting which usually charge a fee I once had a person read an entire tutorial and was upset to discover this to be true at the end Once a site is created, if you want it to

be viewable by the public, you’ll need to upload your files to a web server You can, however, preview most of your web design work on your computer or a network

Also, please note that I will be using Windows as the operating system (Mac users will have to find alternate keyboard shortcuts)

I learn by doing So in this book, I will teach you Photoshop® basics by

having you render an Apple iPad, and Dreamweaver® by having you create a mock website Along the way, I will give you useful information about the design process

Learning Photoshop® by rendering an Apple iPad

With Adobe® Photoshop®, not only can you create amazing affects with

photography, you can render just about anything you can imagine without ever using a photograph To give you an idea how powerful a graphics program

Photoshop® is, you can use it to draw a convincing looking gadget/user

interface: the Apple iPad

By the time you finish rendering this iPad, you will be quite familiar with the Photoshop® user interface and its tools You’ll also be proficient in creating graphics, and ready for web design

In Photoshop® there are always numerous ways to accomplish each task I'll

share my heuristics (techniques for problem solving) with you with many screen captures as I work to build, layer upon layer, a two dimensional representation

of a three dimensional object

First, I'm going to open a new window (File>New) and set the width at 1024 and the height at 768 The resolution will be 72 pixels per inch Make sure you are working in RGB color mode

Save the project as a psd file.

There are many ways to set up your palettes I prefer to group a few palettes together with the 'Layers' palette visible Click on the 'Create a New Layer' button on the layers palette next to the trash icon This will create layer 1.

Hold down the rectangle tool from the tool bar and switch to the 'Rounded Rectangle Tool.'.

Once the Rounded Rectangle Tool is selected, you'll notice that the options will appear above just under the main menu Make sure that the Fill Pixels button is selected Set the radius at 35 pixels, mode normal, opacity 100% and make sure that Anti-alias is checked.

Draw a rectangle using the foreground color (which should be set to black by default) Draw an aspect ratio that you think is consistent with an iPad Double click on Layer 1 to launch the Layer Styles window Check the Gradient Overlay check box on the left.

Click on Gradient Overlay to toggle to the gradient options Set the angle to

0 Click on the gradient strip to launch the gradient editor Click on the bottom left 'Stop' to launch the 'Select stop color' window Choose a light gray I've chosen d5d6d7

Choose another light gray for the right Stop And then create another Stop by clicking in the middle of the gradient strip Make the middle stop a much lighter gray Click okay on the gradient editor.

Now to create the illusion of a rounded edge, in the Layer Style window, select Inner glow Blend mode should be normal Opacity 75% Choose a dark gray color from the color picker The size should be 4.

Duplicate Layer 1 by dragging it to the Create New Layer button in the Layers palette Resize 'Layer 1 copy' (Edit>Transform>Scale) In the options above, set W: at 99% and H; at 98.50 Click enter.

The two rectangles will work together to create the illusion of a thin rounded metallic edge Double click 'Layer 1 copy' to launch the Layer Style window In addition to the inner glow, this rectangle will also have an outer glow Use a dark gray Set the size to 2.

Click Color Overlay and choose black from the color picker.

Create layer 2 Select the Rectangular Marquee Tool or simply push down the M key Select an area approximately the proportions of the iPad screen.

Fill with the background color (Which should be white by default) by selecting Alt/Delete or Edit>Fill

Double click layer 2 to launch the Layer Style window Set the Color Overlay to black Select Bevel and Emboss Style is Outer Bevel Technique is smooth

Direction is Up Size is 5 This will be the first shading effect, so it's okay

to leave the 'Use Global Light' option checked For Highlight Mode and Shadow Mode choose gray, opacity 75% Click Okay

Duplicate layer 1 and slide it to the top level of the layers Turn off the layer effects by clicking on the eye symbols Using the Navigator palette, zoom out Open the Hue/Saturation window (Control U) Move the Lightness slider to the right (+100) Click Okay.

Select the Polygonal Lasso Tool and draw the shape below Click the point where you started, to complete the selection.

Push the Backspace key to delete the selected area What's left is a shape that will become the iPad glare Select the Eraser tool and choose a fuzzy round brush and slide the size to 463 pixels

Click on the white area with the eraser until there is a smooth transition (Note: this effect can also be achieved with the gradient tool)

Double click the magnifying glass (Zoom Tool) to return the image to 100%

(Note: if you have an image that's too big for your screen, but you want it to fit within the screen, double click the Hand Tool) Move the glare down and away from the edge by selecting the Move Tool and tapping the down arrow on your keyboard Reduce layer opacity until the glare looks realistic

Name the layer and remember to keep it on top over other layers

We will now create the iPad camera lens Hold down the Rectangular Marquee Tool and switch to the Elliptical Marquee Tool While holding the shift key select a circle about the size shown Fill with the foreground color 274b86.

Create a new layer above the other layers except for the Glare layer Select the Gradient Tool and pick a lighter blue Make sure the effect goes from foreground to transparent (You can tell by the checkered pattern) Choose Radial Gradient with the options below.

With the Gradient Tool click, hold down and drag a small radial gradient over the blue circle.

Create a few more radial gradients of different tones and values

Create a new layer and drag it underneath the blue ball layer Create a white circle using the Elliptical Marquee Tool and a white foreground color.

Color Overlay should be a dark gray The stroke should be set to 3 with an even darker gray Position: Inside.

Duplicate the layer and resize (Edit>Transform>Scale) Width and Height options should both be 85%.

Keep duplicating layers and transforming until you have circles within circles

I went back and added a dark Inner Glow to the blue circle Size:5.

Select the Burn Tool

Select a brush size for the Burn Tool that is about the size of the blue

circle Click over the gray part of the lens and drag the tool in a 'C' shape until you've made a convincing three dimensional shadow effect Voila—a camera lens! You can make this even more detailed, but once we scale it down it will

be tiny, so you won't see that much detail

In the Layers Palette, select all the layers that you used to create the camera lens and group them together (Layer>Group Layers).

Duplicate the Camera Group layer and turn off the original (click on the eye icon) Before resizing, you should Merge Group (Not shown in the example

below) Merging the group (Control E) will flatten all the layer effects that might not resize along with the graphic Edit>Transform>Scale the camera lens until it is about the size below

Next we will create the Home Button for the iPad Create another layer and a new circle Open the Layer Style window and create a Gradient Overlay The left Stop should be a neutral gray The center and right Stops should be a dark gray.

Duplicate the layer and turn off the gradient effect The circle should be white If it's not, open the Hue/Saturation window and set Lightness to +100 With the Elliptical Marquee Tool, draw an oval as shown below.

Choose Select>Inverse from the menu and press Backspace Control/D to unselect.

In Layer Style give the shape a black Color Overlay Select Inner Glow Opacity 75% Dark Gray Size: 16.

Create a new layer With the Rounded Rectangle Tool and a bright color, hold the shift key down to draw a rounded square In the Layer Style give it a thick white stroke.

In the layer options, reduce the Fill to 0%.

You can change the stroke to gray by either the adjusting the Color Overlay, or turning down the layer opacity You can also flatten a layer with effects by creating a new layer and merging the two layers Merge the Home Button layers together.

Make a copy of the Home Button layer and turn off the original Resize and place on the right side of the screen.

Next we will create a reflection of the iPad Take all the layers that you have used to create the iPad and duplicate them (except for the glare layer) Merge the duplicate layers together Select most of the image except the bottom part

as shown below Push Backspace to delete what is selected

Choose Edit>Transform>Flip Vertical Move the graphic so that it barely touches the bottom of the iPad.

With the Eraser Tool, hold the shift key as you move back and forth, left to right along the bottom of the reflection graphic.

Set the opacity at 50%.

Group all the iPad layers together Create a new layer below the glare layer Create a white rectangle for the screen.

Set the gradient Stops from dark to light blue.

Create a new layer Make a black strip and turn the opacity down to 57% (the thin dark strip at the top of the blue screen).

Can you guess what I'm going to make next? Use the Rectangular Marquee Tool to select an area and fill (See Below).

Duplicate the layers and position them side by side with the Move Tool by holding down the shift key and tapping the right arrow on your keyboard

On each layer select an area that you want to delete and press Backspace You decide what kind of bars you want.

Resize (Edit>Free Transform) I chose to make it less wide With the Type Tool, spell out 'AT&T' or 'iPad' or whatever you want in the Arial Font Turn down the opacity on both layers to 70%.

Using the Elliptical Marquee Tool, select a circle and fill with any color (except white) In the Layer Style set the stroke size at 15 Color: white.

Set the layer Fill at 0% Duplicate the layer Resize (Edit>Transform>Scale) Height and width: 60.81% (Your dimensions may be a little different).

Using the Polygonal Lasso Tool, select a triangular area Choose Select>Inverse from the menu and press Backspace.

Add a circle on another layer

Scale down the audio icon and add it to the bar along with the time in the

center and '75%' on the right Using the Rounded Rectangle Tool, create a black shape as shown below In Layer Style set the stroke at 14 pixels

Make more shapes to create a battery icon.

Finished iPad Now we're ready for content.

Group all the layers related to the info bar that shows the audio icon, battery, etc Create an elongated rectangle at the bottom of the screen.

In Layer Style, set the Gradient Overlay I chose 4 stops with dark to light bluish grayish colors Notice that the Gradient Overlay Angle is set at 0 degrees.

Skew the sides inward slightly (Edit>Transform>Skew).

Using the Pen Tool, create a wavy shape path To use the Pen tool, switch to the Paths palette Click on an area to create an anchor point and then click on another area that will become the end of a curve (a new anchor point) Without releasing the mouse button, drag the path until you see the selection bending Let go when you're satisfied with the curve While holding down the Alt button, click on the last anchor point you made (you should see an upside down V when you're close to clicking the anchor point remember to hold the Alt key down)

in order to create a new curve This is tricky and requires a little practice