Objective
To explore Photoshop's extract tools. To explore Bootstrap's responsive framework by developing a simple web page similar to this example.
Discussion
Bootstrap's powerful framework works fine right out of the box. But not all websites are meant to look like Bootstrap templates. They key to successfully use Bootstrap's framework is to customize Bootstrap's styles to fit your design sensibilities.
Bootstrap's buttons are extremely difficult to style. If you are happy with Bootstrap's color scheme, then using Bootstrap's buttons make sense. If you want alternatives, try out the Push Button Pack which allows easy customizations.
Adobe's Creative Cloud now features new cloud-only apps that are designed to replace Photoshop's "save for web" functions. In this exercise, we will explore Photoshop's new extract operations which are designed for a collaborative workflow environment.
Reference links
Procedure
Overview: Prep Photoshop mock-up. Extract pixel elements using Creative Cloud. Add content to Bootstrap template. Customize Bootstrap styles.
Prepping the Photoshop mock-up
- download starter files, move to "html/exercises/x0_xmas"
- examine "assets/xmas.psd" in Photoshop
- hide "window" layer
- image > canvas size: double the width
- duplicate "bg" layer
- edit > transform > flip horizontal; adjust position
- layer > merge down (cmd+E)
- crop to live area
Extracting assets from Photoshop
- sign in with your adobe ID (or create a new ID)
- go to MY ASSETS: FILES (click YOUR NAME > CREATIVE CLOUD FILES or browse to assets.adobe.com/files
- actions > upload: "xmas.psd"; open
- click EXTRACT, go to LAYERS tab
- extract "bg": format=JPG, save
- repeat for "cd" and "xmas" (scale at 1.5, format=PNG)
- go to MY ASSETS: open assets folder
- download each image
Starting a Bootstrap project
- review Jen Kramer's grid.html
- download Bootstrap starter template
- move files into "html/exercises/x0_xmas"
- duplicate "index.html", rename "index-safe.html"
- move downloaded images to "html/exercises/x0_xmas/images"
- download push button pack
- move files into "html/exercises/x0_xmas"
- copy "buttons.css" to "html/exercises/x0_xmas/css/buttons.css"
- launch dreamweaver
- site > new site: site name=class_x0_xmas;
local site folder=faa999/class/html/exercises/x0_xmas); export STE file
- open "index.html"
- delete <div.col-lg-12.text-center">
- insert
<div class="col-md-5"></div>
<div class="col-md-7"></div>
- add link (above <style>):
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="images/favicon.png">
Adding content
- insert "xmas.png" in left col
- insert "cd-lg.png" in right col
- add class="img-fluid"
- copy/paste text from PSD
- modify <table>: rows=6, col=3
- select first row: modify > table > merge cells
- copy/paste table data from sample page
- edit <nav> links
- change title to "A Child's Christmas in Wales"
- edit <alt> tags
- view > toggle live view (opt+F11)
Styling the page
- window > css designer: source=<style>: delete <body>
- window > css designer: new source=css/xmas.css (+); media=global, add selectors :
• body: margin-top=165px, font-family=Georgia, size=15px; bg=images/bg.jpg", repeat-x, position: x=0px, y=50px
• a: color=#4189D3
• a:hover, a:focus: color=(darker blue)
• .large: font-color=#4189D3 (copy/paste), weight=bold, size=18px, text-align=center, letter-spacing=4.68px
• .red: font-color=#D32027 (eye dropper)
- open "push-bootstrap-button-pack-master/demo.html"
- copy/paste "small button" into "index.html"
- window > css designer: edit selectors (source=buttons.css):
• btn-info: bg=#4189D3
• btn-info:hover: bg=(darker blue)
• btn-info:active: bg=(darker blue)
- view > code: move <style> to below last stylesheet <link>
- file > preview in browser (opt+F12 and cmd+F12)
Fine-tuning the page
- wrap <p> around images
- apply .text-center to select <p>
- apply .red to select <p>
- apply .large to select <p>
- apply .active to <li> for the HOME link
- apply .table to <table>, add ID=tour
- select "xmas.png", add ID=xmas
- select "cd.png", add ID=cd
- window > css designer: add selector (source=xmas.css):
• table#tour: margin-top=50px, margin-left/right=auto
• img#xmas: margin-bottom=50px
• img#cd: padding-left/right/bottom=20px
- file > preview in browser (opt+F12 and cmd+F12)
Grading
- publish your page (see separate instructions)
- make a link to this excercise from your Process Page
