profile page design in Photoshop

profile page design in Photoshop

a brief overview of working techniques in Photoshop,
on the example of a single page design for a professional online profile page


Prisca Schmarsow

October 18, 2011


  1. 1.

    profile page design in Photoshop a brief overview of working

    techniques in Photoshop, on the example of a single page design for a professional online profile page Prisca Schmarsow :: ✽ ✽
  2. 2.

    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
  3. 3.
  4. 4.

    1. file organisation • separate files for asset creation and

    site production • include all source files: original stock images, fonts (+license) !ile management for smooth work!low stay organised ~ stay sane ;)
  5. 5.

    2. setting up new document aimed at 1024px x 768px

    ~ 960px max viewable area pro!ile page ~ dimensions browser window http:// 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://stu! consider !inal dimensions expanding-universe-toolset-managing-screen-resolutions common screen resolutions & sizes
  6. 6.

    3. working with layers & layer groups content related layer

    organisation €013Õ"13$# -0&€"-&3& 3"$ ;-0$ ¥1!""1 &$3 3¥9I0 mj\1 "$!13&1& "#-0&€"1 9" "&0 :&0!¥0&#   $& 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
  7. 8.

    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
  8. 9.

    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 ✗
  9. 10.

    5. adding visual content Keep all images !lexible 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!
  10. 11.

    5. adding visual content !lexible working for smoother work!low •

    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 ✔ ✔ ✔
  11. 12.

    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
  12. 13.

    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!
  13. 14.

    6. adding texture and panels select path & copy/paste ⌘

    / ctrl + C , in Illustrator ⌘ / ctrl + V , in Photoshop using vector elements in Photoshop option 1 using Illustrator to create graphic for use in Photoshop save graphic as EPS in Illustrator file > place in Photoshop option 2 using Photoshop only use shape layers: via shape tools // pen tool enable shape layers in option bar nothing beats the crispness of vector :)
  14. 15.

    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.
  15. 16.

    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 on the layer — for Photoshop edits: use selection tools to edit • applying previously created texture via pattern fill: option 1 • make selection via command-click on panel shape • use fill command to fill with pattern option 2 • select smart object layer with panel shape • create new layer fill layer & choosing previous layer to be used as clipping mask
  16. 17.

    6. adding texture and panels working with multiple windows opening

    the same document in multiple windows allows for viewing details at various zoom factors while editing.
  17. 18.

    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
  18. 20.

    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.
  19. 21.

    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:
  20. 22.

    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: • shi#t-select the relevant layers • link layers and move by selecting one of the linked layers • group layers into layer groups and move group
  21. 23.

    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 re!ining selection click icon on toolbar, double-click for options click chosen colour to make selection, add to selection by holding down ‘shi#t’ and continuing to click use brush to define selection, click icon again to view selection
  22. 24.

    9. cutting out photographic elements selection techniques Path for precise

    de!inition 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
  23. 25.

    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 ~ so#t or sharp, readily editable
  24. 26.

    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 !inal image to mockup.
  25. 27.