Building a Website from Planning to Photoshop Mockup to HTML/CSS


Published on

Published in: Design, Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building a Website from Planning to Photoshop Mockup to HTML/CSS

  1. 1. Building a Website: From Planning, to Photoshop Mockup to HTML/CSS
  2. 2. Planning:Notes  from  Client  Mee/ng  
  3. 3. Wireframe  &  Site  Planning  Phase:  Explana/ons  of  Pages  &  their  Content  
  4. 4. Mockup  Versions  First  Mockup   Second  Mockup  
  5. 5. Mood  Board  created  aBer  another  client  mee/ng:  
  6. 6. Start by creating a folder for your images:
  7. 7. It is important to keep your layers organized so when you are ready to slice your site youcan isolate each area. Here is just the blank content area and the background.
  8. 8. And here is the background, the <body> of our website:
  9. 9. Start with the bottom layer of your background, and work up.Because the graph paper repeats the entire height and width of the background, wecan create a tile, and have this repeat. Once you select the area you want hit Shift + Command + C This copies the contents of all visible layers into clipboard – that way if your background is made up of more than one layer, or if you aren’t on the right layer in Photoshop, it doesn’t matter. PC: Control + Shift + C Or Edit > Copy Merged in the Photoshop toolbar
  10. 10. Then create a new Photoshop document, by default it will create a document that isthe exact size of the image that is now on your clipboard. Hit ok and then paste theimage onto the new document.
  11. 11. Then save your image by going toFile > Save for Web & Devices…This image is very simple so GIF is the most appropriateformat to save this image as.
  12. 12. Be sure to save the file inthe folder you created foryour images and name itsomething that is simple &makes sense. Do not usespaces in your filename. Ifyou must use spaces usethe underscore.Example: grid_bkg.gif
  13. 13. I want to save the Post-Its as one image. I turn off the background layers so that Ihave a transparent background. This is the perfect time to use Shift + Command +C because these Post-It notes and the scribbling on them are all in separate layers.Also Shift + Command + C will keep the transparent background.
  14. 14. By default, Photoshop will give the first layer a white background. Turn off thelayer’s visibility if you want to save your image with a transparent background.
  15. 15. Since I want to keep the background transparent, and I also want to keep thedropshadows on the Post-Its to look smooth, PNG-24 is the best format to save thisimage as.
  16. 16. Once you have all your images together, it’s time to start building the website.When you open Komodo remember to use File > New > File from template…and choose HTML. Remember to save your file to the directory you created for your website. Site Directory Remember to keep your image folder inside your site directory!
  17. 17. Then create a style sheet (.css file)by going to File > New > Filefrom template… and selecting CSSfrom the templates area. Don’t forget to link your HTML page to the style sheet!
  18. 18. First, I’m going to start with the very bottom of the background, the grid pattern. Notice that Idon’t have to specify background-repeat because by default the background image will repeatx & y, starting from the top left corner (0,0).
  19. 19. The background can have multiple images. It works the opposite way you would imagine itwould – the first image listed is the topmost image, and the last image listed is thebottommost.body{ background-image: url(img/postits.png), url(img/gridbkg.gif); background-repeat: no-repeat, repeat;}
  20. 20. body{ background-image: url(img/banner.png), url(img/postits.png), url(img/gridbkg.gif); background-repeat: no-repeat, no-repeat, repeat; background-position: 50% 10%, 50% 290px, 0 0;}
  21. 21. body{ background-image: url(img/banner.png), url(img/postits.png), url(img/gridbkg.gif); background-repeat: no-repeat, no-repeat, repeat; background-position: 50% 10%, 50% 290px, 0 0;}
  22. 22. Next I add a #content div to index.html and style my #content div in the CSS file.Once I have my content div styled, I can then make adjustments to the background imageto make sure they are behaving correctly.
  23. 23. Added margin:auto; to ensure thecontent div stays at the very top of thepage
  24. 24. But the design calls for a dropshadow on either side of the contentdiv… how do we solve this problem? A CSS dropshadow isn’t always cross-browser compatible and doesn’t have the nuance in gradation and image has so I’m going to create a background image.
  25. 25. I’ll save the image for web as a PNG-24 to keep the transparency of the dropshadow.
  26. 26. #content{ width: 1014px; background: url(img/contentbkg.png) repeat-y center; height: 1000px; margin: auto;}
  27. 27. Breaking down the code:#content{ width: 1014px;The actual content area is 960px but to account for the border (20px each side = 40px)and the dropshadow, the width is expanded to 1014px; background: url(img/contentbkg.png) repeat-y center;Here I am using the background property that is a shorthand property. Because I’m onlyworking with one background, I have my link to the image, repeat-y because thebackground is only repeating vertically and center so that the background image iscentered within the div. height: 1000px;For now this height is an arbitrary height, it is just giving me an idea of how thecontent div will behave once I fill it with content. Without this height, it would betoo small to give a sense of how the page will look. Usually you don’t put a height onyour content area because you want the content to fill the area and allow for theflexibility of pages with a lot of content or pages that have little content. margin: auto;This ensures that the content div is in the center of the page.}
  28. 28. Now  I’m  star/ng  to  put  all  the  pieces  into  the  website.  I  always  start  with  the  logo  aBer  I  finish  the  background.  Generally  you  want  to  start  from  the  boKom  up  and  from  the  top  down.  You  can  add  thing  as  you  want,  but  it  does  make  it  easier  to  keep  track  of  your  code  and  where  you  are  placing  things.    No/ce  I  added  the  “ALT”  for  the  image  so  that  screen  readers  would  read  “INI  Logo”  –  it  also  helps  for  search  op/miza/on  that  you  label  all  the  images  with  an  alt.  
  29. 29. To  make  the  logo  into  a  link,  simply  nest  the  <img>  tag  in  a  <a>  tag.  <div id="logo"><a href="index.html"><img src="img/ini_logo.png" alt="INI Logo" border="0"></a></div>Images  that  have  a  link  around  them  will  some/mes  appear  with  a  default  blue  border  there  are  a  few  ways  to  fix  this,  but  I  generally  use  border=“0”  in  my  img  tag.  
  30. 30. To  make  the  logo  appear  like  it  is  in  the  mockup  –  with  it  seeming  to  be  up  past  the  edge  of  the  page,  I  use  posi%on:  absolute;    Remember,  in  order  for  it  to  posi/on  rela/ve  to  the  content  area,  you  must  add    posi%on:  rela%ve;  to  the  the  #content  div.    If  you  didn’t  add  posi/on:rela/ve;  to  the  content  div,  the  logo  would  posi/on  rela/ve  to  the  <body>  and  it  would  appear  to  “fly  off”  the  content  area.    Using  nega/ve  values  in  your  posi/oning  helps  to  get  elements  past  the  boundary  of  the  div  its  within.  
  31. 31. I  start  to  add  in  and  style  my  #nav  div  –  but  it  looks  like  a  mess!  How  do  I  fix  this?  The  answer:  MATH  
  32. 32. The  design  has  a  margin  of  20px  between  the  yellow  border  and  the  content  within  the  page.  So  we  need  to  put  in  some  padding  on  our  #content  div  –  but  that  effects  the  width  of  our  content  div.  Time  to  pull  out  the  calculator…  
  33. 33. #content{ width: 924px; background: url(img/contentbkg.png) repeat-y center; height: 1000px; margin: auto; position: relative; padding-left: 45px; padding-right: 45px;}To  account  for  the  dropshadow  +  the  border  on  the  background  image  of  the  content  div  we  need  a  padding  of  45px  to  create  the  illusion  of  a  20px  padding  in  the  content  area.    Then  to  account  for  the  90px  of  padding  we  need  to  take  subtract  90  from  the  1014px  width.      Resul/ng  in  a  new  width  of  924px.  
  34. 34. To  get  the  font  that  I  used  for  the  naviga/on  I  used  hKp://  
  35. 35. To  style  the  naviga/on  I  used  similar  to  the  code  I  used  for  our  dropsite  tutorial.  #nav ul { float: right; margin-top: 8px; padding-right: 20px;}#nav { display: block; float: left; font-family: bignoodletitlingregular; font-weight: 100; font-size: 30px; padding-bottom: 10px;}#nav a{ text-decoration: none; padding-left: 30px;}#nav a:link, #nav a:visited{ color: #fff;}#nav a:active, #nav a:hover, #nav a:hover{ color: #E6D41B;}