✽ 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 :: eyelearn.org
Steps covered Profile outline • name 1. file organisation • motto / tagline 2. setup document, resolution options • experience / skills 3. working with layers & layer groups • status 4. adding textual content (current employment status, inc. 5. adding visual content ‘available for work / from...’) 6. adding texture and panels • URLs 7. adding colour (portfolio site/blog/employer’s site) • contact / vCard 8. adding icons • social media link 9. cutting out photographic elements
1. file organisation f ile management for smooth work f low • separate files for asset creation and site production • include all source files: original stock images, fonts (+license) stay organised ~ stay sane ;)
2. setting up new document consider f inal dimensions common screen resolutions & sizes 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://punchcut.com/perspectives/ http://stu f fandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ expanding-universe-toolset-managing-screen-resolutions pro f ile page ~ dimensions aimed at 1024px x 768px ~ 960px max viewable area browser window http:// 960 px max width
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 e ffi cient ������������ ����������� � �� ������� ���� 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 f ile - 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 f lexible to edit & make notes on CSS implementations. consider leaving annotations within the layer name for visual e ff ects which are to be implemented via CSS always use layer masks!
5. adding visual content f lexible working for smoother work f low use layer masks! • 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 Checklist before handover: • work with final visuals and photos ✔ • use wireframe as reference for positioning double-check layer naming and annotations • name all new layer immediately to maintain organised file structure ✔ delete any unnecessary layers • always use non-destructive and flexible editing methods (keep original copy as back up!) • user layer styles with consideration and evaluate final result ✔ include sources, such as font files, carefully ~ sometimes the best result will be manual layering images and licenses instead
6. adding texture and panels Guides & initial text layout useful keyboard shortcuts: ⌘ / ctrl + ; = show / hide guides ⌘ / ctrl + ‘ = show / hide grid ⌘ / ctrl + R = show / hide rulers • using wireframe reference - position text elements, working with the grid for alignments • use guides to highlight core positioning points
6. adding texture and panels tiled pattern as texture background use adjustment layers! 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
6. adding texture and panels using vector elements in Photoshop nothing beats the crispness of vector :) option 1 using Illustrator to create graphic for use in Photoshop select path & copy/paste save graphic ⌘ / ctrl + C , in Illustrator as EPS in Illustrator ⌘ / ctrl + V , in Photoshop file > place in Photoshop option 2 using Photoshop only use shape layers: enable shape layers in option bar via shape tools // pen tool
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 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
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.
7. adding colour • adding header colour strip, making note of colour for reference • use main strip to o ff 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
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 di ff 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.
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 repositioning multiple layers: • shi f t-select the relevant layers • link layers and move by selecting one of the linked layers • group layers into layer groups and move group 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.
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 Quick Mask for initial, rough for re f ining selection selection click icon on toolbar, click chosen colour to double-click for options make selection, add to selection by holding down ‘shi f t’ and continuing to click use brush to define selection, click icon again to view selection
Recommend
More recommend
