Embed Size (px)
DESCRIPTION
I design WordPress websites nearly every day of my working week! Here is how I go about it and some considerations to well.....consider!
Citation preview
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/
![[2011] Setting visions and good governance in SEE - Blaz Golob](https://img.dokumen.tips/doc/110x75/555a4611d8b42ae1398b5187/2011-setting-visions-and-good-governance-in-see-blaz-golob.jpg)
