profile page design in Photoshop a brief overview of working - - PowerPoint PPT Presentation

profile page design in Photoshop

a brief overview of working techniques in Photoshop,

• n the example of a single page design for a professional online profile page

Prisca Schmarsow :: eyelearn.org

✽ ✽

Steps covered

1. file organisation

• 2. setup document, resolution options
• 3. working with layers & layer groups
• 4. adding textual content
• 5. adding visual content
• 6. adding texture and panels
• 7. adding colour
• 8. adding icons
• 9. cutting out photographic elements

Profile outline

• name
• motto / tagline
• experience / skills
• status

(current employment status, inc. ‘available for work / from...’)

• URLs

(portfolio site/blog/employer’s site)

• contact / vCard
• social media link

• 1. file organisation
• separate files for asset creation and site

production

• include all source files: original stock

images, fonts (+license)

file management for smooth workflow stay organised ~ stay sane ;)

• 2. setting up new document

aimed at 1024px x 768px ~ 960px max viewable area

profile page ~ dimensions

960 px max width

Smartphones (portrait and landscape) (min-device-width : 320px) and (max-device-width : 480px) iPads (portrait and landscape) (min-device-width : 768px) and (max-device-width : 1024px) Desktops and laptops (min-width : 1224px) Large screens (min-width : 1824px)

from Hardboiled CSS3 Media Queries by Andy Clarke: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

consider final dimensions

http://punchcut.com/perspectives/ expanding-universe-toolset-managing-screen-resolutions

common screen resolutions & sizes

• 3. working with layers & layer groups

content related layer organisation

• saving time ...
• organise layers according to

content to keep visuals readily available for exporting for web

• use layer groups for efficient

workflow

• name layers and layer groups in

meaningful manner (especially important for team work)

• keep wireframe in file for

reference

• 3. working with layers & layer groups

Photoshop file - set up with layer groups

• 4. adding textual content

Always design from the content out.

• work with final content
• use wireframe as reference for

positioning

• experiment with typefaces
• apply type settings via control panels

image via gimmebar

• 4. adding textual content

working with type

DO

• work with editable

type layers

• use type panels to

adjust text settings

• maintain aspect ratio

✔

DON’T

• rasterise font layers
• transform text via the

transformation tools

• distort text

✗

• 5. adding visual content

Keep all images flexible to edit & make notes on CSS implementations.

consider leaving annotations within the layer name for visual effects which are to be implemented via CSS

always use layer masks!

• 5. adding visual content

flexible working for smoother workflow

• work with final visuals and photos
• use wireframe as reference for positioning
• name all new layer immediately to maintain organised file structure
• always use non-destructive and flexible editing methods
• user layer styles with consideration and evaluate final result

carefully ~ sometimes the best result will be manual layering instead

• do not delete any visual data during design

stages ~ keep your file flexible

• use layer masks for image crops to allow for

reframing or editing as required

• keep a copy of the original in the file for easy

access

use layer masks! Checklist before handover:

double-check layer naming and annotations delete any unnecessary layers (keep original copy as back up!) include sources, such as font files, images and licenses

✔ ✔ ✔

• 6. adding texture and panels

Guides & initial text layout

• using wireframe reference - position text elements,

working with the grid for alignments

• use guides to highlight core positioning points

useful keyboard shortcuts:

⌘ / ctrl + ; = show / hide guides ⌘ / ctrl + ‘ = show / hide grid ⌘ / ctrl + R = show / hide rulers

• 6. adding texture and panels

tiled pattern as texture background

use adjustment layers when editing colour and brightness, allows for easy tweaking during production stage

• for textured backgrounds ~ edit a suitably sized

image to tile seamlessly

• save final image as pattern for backup and ease of

use, apply to mockup as pattern fill

use adjustment layers!

• 6. adding texture and panels

select path & copy/paste ⌘ / ctrl + C , in Illustrator ⌘ / ctrl + V , in Photoshop

using vector elements in Photoshop

• ption 1

using Illustrator to create graphic for use in Photoshop save graphic as EPS in Illustrator file > place in Photoshop

• ption 2

using Photoshop only use shape layers: via shape tools // pen tool enable shape layers in option bar

nothing beats the crispness of vector :)

• 6. adding texture and panels

panel shape ~ vector curves for sharp lines

Depending on your preferred workflow:

• in Photoshop:

work with shape layers to keep panel outline flexible for editing and resizing

• for Smart Object ~ use Illustrator:

create panel shape to size in Illustrator bring into the .psd file as Smart Object Smart Objects will keep the sharpness and precision of the vector object and allow editing and resizing without loss of quality.

• 6. adding texture and panels

editing panel textures

• using vector shape as basis for both panels

— for Smart Object: edit via Illustrator to fit design by double-clicking the smart object thumbnail

• n the layer

— for Photoshop edits: use selection tools to edit

• applying previously created texture via pattern fill:
• ption 1
• make selection via command-click on panel shape
• use fill command to fill with pattern
• ption 2
• select smart object layer with panel shape
• create new layer fill layer & choosing previous

layer to be used as clipping mask

• 6. adding texture and panels

working with multiple windows

• pening the same document in multiple windows

allows for viewing details at various zoom factors while editing.

• 7. adding colour
• adding header colour strip,

making note of colour for reference

• use main strip to offset colour band on

panels, create new layers via copy

• align colour bands via either:

— align tools in option bar — top menu > layer > align

useful keyboard shortcuts: ⌘ / ctrl + J = Layer via copy ⌘ / ctrl + ⇧ + J = Layer via cut

• 7. adding colour

stay organised : name new layers immediately ~ keep within layer groups

• 7. adding colour

text styling and colour use

• using a single font ~ text elements are styled with

different sizes, styles and weights for emphasis and distinction

• limiting design and typography to 2 colours ~ using

shades to add variety and dynamic

main text

All content text is set in shades of black, maintaining high contrast for clear legibility.

highlights

To draw user’s attention to the tagline and the contact section ~ red is used in 2 shades, using colour band as base colour.

• 8. adding icons

use icons for easy recognition and skim reading

• use icons to emphasize links for user-friendly presentation
• social media icons edited to suit design’s colour scheme and

used for easy recognition

• consider icon size both for clarity and identification:

~ medium/large size: can include small details ~ small size: strip small details for cleaner appearance

consider typographical symbols

Icons are commonly added as images which add to file

• size. During the design process ~ consider whether

typographical symbols could be used instead. Making use of glyphs included in the font used - the final file size can be kept lighter than using images. Dingbats symbol set:

• 8. adding icons

✽

establish connections

The florette glyph is used to highlight link to portfolio website ~ and used within header section to draw attention to work availability info, connecting both by visual means.

repositioning multiple layers:

• shift-select the relevant layers
• link layers and move by selecting
• ne of the linked layers
• group layers into layer groups and

move group

• 9. cutting out photographic elements

To draw user’s attention to the contact details on the page a photo of an old-fashioned phone is added to the bottom of the main panel. To prepare images for use within the design ~ keep in mind:

• work in RGB
• final size used within page layout
• transparency and background (colour / texture)

selection techniques

Magic Wand

for initial, rough selection

Quick Mask

for refining selection click icon on toolbar, double-click for options click chosen colour to make selection, add to selection by holding down ‘shift’ and continuing to click use brush to define selection, click icon again to view selection

• 9. cutting out photographic elements

selection techniques

Path

for precise definition of selection with selection active, go to Path panel and click icon to create initial path

Channels

to save edited selections via top menu: Selection > Save Selection selection can be activated via top menu: Selection > Load Selection

• 9. cutting out photographic elements
• ensure perfect quality before using graphic in

mockup

• zoom in closely to check image cut out
• use a solid colour layer to see superfluous pixels
• consider shadows carefully

perfect cut outs always use layer masks ~ never delete image data!

• allows for easy editing during production
• keeps image intact
• flexible image borders

~ soft or sharp, readily editable

• 9. cutting out photographic elements

perfect cut outs always use adjustment layers ~ don’t commit settings too soon!

• allows for easy adjustment during production
• fine-tuning available via settings and layer

modes

• allows for focused adjustment of specific

image areas

add final image to mockup.