9. Approved Design
XHTML Design
(trace the design & details, in lesser
iteration via using reference image
on <body> or <div> container)
11/23/2011 9
10. Recipe..OH! The TECHNIQUE (page 1)
Technique
1. Slice psd carefully and export the images.
2. Create a separate directory for sliced images in
your code base.
3. Create the css file trace.css.
4. Pick those slice image and add them as
background image to your containers #id,
.classes in trace.css.
5. Start theming in your browser using reference
image. Don’t forget FIREBUG or choose webkit
inspector, Dragon fly or IE Developer tool bar!
11/23/2011
Continued…
10
11. TECHNIQUE… page 2
Technique…page-2
1. Designer can work on his/her design
assignments, chewing it slowly into bits &
pieces. While developer getting dirty with
code.
2. Use sliced background image as your
reference, follow them well.
11/23/2011
Continued…
11
12. TECHNIQUE… slide 3
Technique…page-3
1. For Visual QA a different eye is needed other
than designer.
2. Ask QA to have an early look on the design
before QA’s signals.
3. Based on feedback. Refine. And Don’t forget
the cross browser check!
11/23/2011
Continued…
12
13. ADVANTAGES
ADVANTAGES
1. You need not to shuffle between psd design
and the actual design. Everything LIVE and
trying to get ALIVE (reference image) in same
plane.
It is like an artist painting on a canvas.
2. Help the developer easy to remember the
bits & pieces from reference image in the
design (under theme development).
11/23/2011 13
14. AHH! Well that seems too
cumbersome!!
NO PROBLEM!
11/23/2011 14
15. Alternative Approach
Alternative Approach
HELLO DOCTOR!
Press Print Screen of your themed page ( in
browser) and do a Health check via Guides!
11/23/2011 15
23. SOME PATH TRACING EXAMPLES
3D
http://blenderartists.org/forum/showthread.php?186653-
Iron-Man-Model-edit-and-Animation!
11/23/2011 23
24. SOME PATH TRACING EXAMPLES…
CRICKET! Run Rate (test match)
India vs. West Indies, 2nd Test
11/23/2011 24
25. SOME PATH TRACING EXAMPLES…
Satellite path
telesat.com
11/23/2011 25
26. Design demand details
In short:
MATCH THE VISUAL IMPLUSE OF
STATIC VS DYNAMIC DESIGN.
(techniques already being shared)
11/23/2011 26
27. Some words of wisdom
Give me six hours to chop
down a tree and
I will spend the first four
hours sharpening the
axe.
~Abraham Lincoln
11/23/2011 27
28. Some words of wisdom
If you preach what you practise
then your words get
magical powers
and can do wonders.
~ Ramakrishna (Paramahamsa)
11/23/2011 28