Web design with photoshop
Web design with photoshop Lecture 8 Photoshop is an image manipulation software You will design the buttons/headers/footers.. But it does not CODE Pros and cons Why use it? It gives you fast visual representation Expanded vector tool set Problems No multi-page workflow Limited css support Css not always „clean“ Design workflow Sketch your site Build a mock-up in photoshop Have mock up coded Coding Design is coded using css http://www.w3schools.com/css/ Different browsers tend to behave differently You have to test on different browsers Design principles PURPOSE What should the page do? How to help people achieve it Communication What kind of information needed? Organize using headlines and sub-headlines Use bulleting Design principles Fonts Serif vs sans serif Sans serif fonts – contemporary looking fonts without decorative finishes Arial Verdana Easier to read Ideal font size for web 16 px Keep to 3 fonts and 3 sizes to keep design simple Design principles Colors Do not use too vibrant or too dark colors Hard to read small white text on black background Use contrast colors on background and text White spaces/areas are used quite often in modern design Images Sometimes images speak more than words – use info graphs Using images can have emotional impact – do not overcrowded the design Design principles Navigation Logical page hierarchy Three click rule – you should be able to reach every page with three clicks Grid based layouts Align your elements Arraign content into sections Design principles Positioning Important information to left and top People read in „F“ pattern Design principles Load time Optimize image size Combine code into central css or javascript library (less HTTP requests) Optimize HTML/css/javascript library size (less bits to load) Mobile friendliness Use code that detects mobile and uses other layout Or design layout so that all devices are able to show it Other things to remember Keep things simple Keep the focus Design examples https://makgoods.com/ http://www.thomaspink.com/ http://www.liquidsunshine.in/ http://colly.com/ Simple blog layout Now we will make simple layout for blog 4 sections Header Content Footer Menu Open new file Web has no „certain width“ – design has to take this into account Use gridlines Header Use shape tools – rectangle and/or gridlines to define your header Header Use image on header with clipping mask Adjust colors/contrasts to fit with design Header Add logo Use character options Usually wider letter spacing is used for neater look Using aligning options at the top Header Bringing the logo out Outline? Use blending options, add stroke Background? Use rectangle tool/new layer and lower fill Header Add title Choose font Choose color that stands out I use gridlines and shape->line to make double under strokes Content Using gradient to create reflection I copy merge my header image with adjustment layers New layer – flip vertically Content Add layer mask Use gradient tool (same position as paint bucket) Choose white/black gradient Paint over layer mask so that only upper part is visible and image fades Content Design blog post title and sub header (for date) Content Add content text Use paragraph options to align text Footer Use new layer/shape tool to make new area Footer usually contains contact information and/or copyright notification Usually small text Menu Use rectangular tool with line tool to create menu area Add menu elements Fill the background to make buttons stand out more Final design Saving elements for coding No easy option Some parts, like menu and footer, will be fully coded – nothing to copy Header image You need to remove text and logo and do a copy merge, make new file and save it there Reflection Same, you remove everything else in the file, so that transparency becomes visible Copy merge, new file, save Logo Turn everything else off Copy merge, new file, save Saving elements for coding What format? If no transparency, jpg can be alright PNG keeps transparency (if interlaced option checked) No loss of quality
© Copyright 2024