photoshop best(blaz) practice for wordpress

HELLO WORDPRESS-ERS

you're a good looking bunch

50/50

BLAZ ROBARIS THE NAMEWEB DESIGNIS MY GAME

@blazRobar

PHOTOSHOP BEST PRACTICE FOR WORDPRESS

A LITTLE ABOUT ME

web designer / all round nice guy

SLEEPY BLAZ ROBAR

ELEVEN MEDIACO-OWNER/WEB DESIGNER

elevenmedia.com.au

BLAZROBAR.COMTHE ROBIN HOOD OF FREE PSDS

OVER 45,000+ WORDPRESS USERS

DESIGN WEBSITES

DESIGN WEBSITES

AT WORK I

AT HOME I

1 SERIOUSLY PISSED OFF WIFE

LOVE YA HUNNIE

PHOTOSHOP BEST PRACTICE FOR WORDPRESS

the break down

WORKING IN PHOTOSHOP

REAL CONTENT BREAKS THINGS

WORDPRESS CONSIDER-ATION

001 002 003

WORKING IN PHOTOSHOP

001

a better work flow. like a boss

USE ONE!GRID

add some structure to your designs

www.960.gs www.guideguide.me

USE FOLDERS & USE DESCRIPTIVE NAMES

name folders like you would name your { divs }

KEY TO HAPPINESS

select layers & Ctrl/Cmd+G

DO NOT FLATTEN

YOUR LAYERS

instead - convert them to smart objects

GOOD WAY TO DIE.

HEAVENLY.

DOWNLOAD YOUR GOOGLE FONT

www.google.com/fonts/

DOWNLOAD. SORTED.

GET LAZY LEARN SHORTCUTS

and make some custom ones

http://www.zerolag.com/wp-content/uploads/2013/03/ZeroLag.com _ photoshop _ screen _ logo2.jpg

I SET UP CMD + 1 (SAVE FOR WEB)

DON'T USE LAYER BLEND

'overlay' is not a web thing....yet.

OVER.. WHAT?

1 PSD FILE IS FINE

because updating more than 1 file is just insane

GROUP A NEW PAGE LAYOUT IN A FOLDER

eg - Home/ About / Contact

PAGES

DELETE UNUSEDLAYERS

don't be a layer horder.

TRASH IT

USE TEXT BOXES LIKE DIVS

helps your developer with alignment references

WHAT HAPPENS OUTSIDE OF YOUR

CANVAS?people with big screens have feelings too

REAL CONTENT BREAKS THINGS

002

real life content is ugly

ALLOW FOR LONG HEADINGS

do your titles still look good?

DESIGN WORLD REAL WORLD

USE REALISTIC IMAGE FORMATS

super panoramic WILL BRING you PAIN

CONTENTdesign based around the amount of

DO YOUR DIVS STRETCH?

ARE THEY FLUID? DO THEY NEED TO BE?

WORDPRESSCONSIDERATIONS

003

what would wordpress do?

RE-USE DESIGN ELEMENTS

eg - keep sidebar elements the same size

POWERING YOURCONTENT

how is your content powered by wordpress?

IMAGE SLIDER - POST FEATURE IMAGE

WP NAV / PAGES

CUSTOM FIELDS

POST FEATURE

IMAGE

POST FEATURE

IMAGE

POST FEATURE

IMAGE

POST EXCERPT

POST EXCERPT

POST EXCERPT

CUSTOM FIELDS

THINK OF THEDETAILS

devil is in the detail

DESIGN WORDPRESSFUNCTIONALITY

consider including core wordpress functionality

TAGS LISTCATEGORIES LISTWIDGETSBLOG PAGE COUNTER

COMMENTSLATEST ARTICLESSEARCHCOMMENT COUNT/DATE

CORE ELEMENTS TO CONSIDER

SUMMING UP

Use a grid in Photoshop www.960.gsGroup your layers & name your folders div names

1 psd file 1 page per foldertext boxes ex tend them like divs

CREDITSillustrate free download :

www.blazrobar.com

icons: www.webdesignerdepot.com/2013/03/free-download-500-

vector-mega-icon-pack/

QUESTIONS?

SEND HATE MAILBLAZ@ELEVENMEDIA.COM.AU

@blazRobar

Styles Demo??