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 Proﬁle 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
~ 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!fandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ consider !inal dimensions http://punchcut.com/perspectives/ expanding-universe-toolset-managing-screen-resolutions common screen resolutions & sizes
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 eﬃcient workﬂow • name layers and layer groups in meaningful manner (especially important for team work) • keep wireframe in ﬁle for reference
work with ﬁnal visuals and photos • use wireframe as reference for positioning • name all new layer immediately to maintain organised ﬁle structure • always use non-destructive and ﬂexible editing methods • user layer styles with consideration and evaluate ﬁnal result carefully ~ sometimes the best result will be manual layering instead • do not delete any visual data during design stages ~ keep your ﬁle ﬂexible • use layer masks for image crops to allow for reframing or editing as required • keep a copy of the original in the ﬁle 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 ﬁles, images and licenses ✔ ✔ ✔
• 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
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 ﬁnal image as pattern for backup and ease of use, apply to mockup as pattern ﬁll use adjustment layers!
/ 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 ﬁle > 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 :)
for sharp lines Depending on your preferred workﬂow: • in Photoshop: work with shape layers to keep panel outline ﬂexible for editing and resizing • for Smart Object ~ use Illustrator: create panel shape to size in Illustrator bring into the .psd ﬁle as Smart Object Smart Objects will keep the sharpness and precision of the vector object and allow editing and resizing without loss of quality.
vector shape as basis for both panels — for Smart Object: edit via Illustrator to ﬁt 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 ﬁll: option 1 • make selection via command-click on panel shape • use ﬁll command to ﬁll with pattern option 2 • select smart object layer with panel shape • create new layer ﬁll layer & choosing previous layer to be used as clipping mask
of colour for reference • use main strip to oﬀset 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
a single font ~ text elements are styled with diﬀerent 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.
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 identiﬁcation: ~ 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 ﬁle size. During the design process ~ consider whether typographical symbols could be used instead. Making use of glyphs included in the font used - the ﬁnal ﬁle size can be kept lighter than using images. Dingbats symbol set:
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
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 • ﬁnal 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 deﬁne selection, click icon again to view selection
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
using graphic in mockup • zoom in closely to check image cut out • use a solid colour layer to see superﬂuous pixels • consider shadows carefully perfect cut outs always use layer masks ~ never delete image data! • allows for easy editing during production • keeps image intact • ﬂexible image borders ~ so#t or sharp, readily editable
adjustment layers ~ don’t commit settings too soon! • allows for easy adjustment during production • ﬁne-tuning available via settings and layer modes • allows for focused adjustment of speciﬁc image areas add !inal image to mockup.