PSD to HTML Project Day
PSD to HTML Project Day
2 0
gdi-psd-to-html-project-day
Materials for PSD to HTML Project Day (developed for Girl Develop It Philadelphia)On Github zoerooney / gdi-psd-to-html-project-day
PSD to HTML Project Day
http://zoerooney.com/project.zipWelcome!
Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
Some "rules"
- We are here for you!
- Every question is important
- Help each other
- Have fun!
Well, hello there!
We're happy to have you here.
Let's take a few minutes and get to know each other.
- Who are you?
- What do you hope to get out of project day?
- If you could travel anywhere, where would you go and why?
Overview of the Day
- Quick overview of the design
- Key information from the PSD
- Strategy talk!
- Work time!!
- As needed: group Q&A, strategy discussion
What to expect
- We want to maximize your work time
- We don't want to frustrate you/ have you get stuck
- There are many ways to float a div
- You're never the only one with the question
- We'll play it by ear - let us know what you need
Photoshop Settings
Units
Under the Photoshop menu.
- Panels (Type, Layers, Slicing)
- Units & Rulers
- Guides, Smart Guides & Grid
Key Tools & Panels
- Type
- Character panel
- Paragraph panel
- Layers panel
- Slice
- Select
- Eyedropper
Strategy Huddle
Mapping out the Layout
Before I dive into details, I like to "reverse-wireframe" the layout to give me some initial ideas about page structure.
Style Info & Assets
Normal Workflow:
- Slice tool & layers
- Determine dimensions from file
- Create sprites
- Get font info from file and/or designer
- Save for web, optimize
Option for Today:
- Assets are pre-sliced
- Dimensions are listed
- Sprites are provided
- Style info is provided
- Images are provided
You can use the provided assets, or you can DIY - totally up to you/ your comfort level with Photoshop!
Getting Started
Build out your page
Create index.html Add your head, body tags Create style.css Create an assets folder (or a few) Include your stylesheet in your HTML Include your fonts Go forth and code!Annnnd...
GO!
Questions?
?