graphic, color and tools
TRANSCRIPT
![Page 1: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/1.jpg)
Graphic Color and Tools 322432 Web Design Technology
By Yaowaluck Promdee, Dr. Sumonta Kasemvilas
WDS CS KKU
Web design technology | 2015 1
![Page 2: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/2.jpg)
Index
• The Design Concept • Color • Graphic • Graphic Tools • Assignment
WDS CS KKU
Web design technology | 2015 2
![Page 3: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/3.jpg)
THE DESIGN CONCEPT
WDS CS KKU
Web design technology | 2015 3
![Page 4: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/4.jpg)
The Design Concept
1. To inform 2. To identity 3. To persuade
WDS CS KKU
Web design technology | 2015 4
![Page 5: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/5.jpg)
Plan Research, Observe
Wireframe, Concept
Design
Design Concept WDS
CS KKU
Web design technology | 2015 5
![Page 6: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/6.jpg)
WDS CS KKU
Web design technology | 2015 6
Design isn’t visual
Be user centric
Design is in detail
Sketch often User white space
Keep inspirations
Design is all about
problem solve
Don’t copy ideas
Graphisc and colors
The Design Concept for web designer
http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255
![Page 7: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/7.jpg)
GRAPHICS AND COLORS
WDS CS KKU
Web design technology | 2015 7
![Page 8: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/8.jpg)
Graphic • Vector • Bitmap
WDS CS KKU
Web design technology | 2015 8
![Page 9: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/9.jpg)
Web design technology | 2015 9
http://www.creativebloq.com/colour/tools-colour-schemes-12121430
![Page 10: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/10.jpg)
Web design technology | 2015 10
Color of
emotions
![Page 11: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/11.jpg)
GRAPHIC TOOLS
WDS CS KKU
Web design technology | 2015 11
![Page 12: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/12.jpg)
Graphic Tools
Picture editor, Design page Vector picture editor
WDS CS KKU
Web design technology | 2015 12
![Page 13: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/13.jpg)
Screen of Illustrator
Artwork
Zoom in, Zoom out Page for Show your work
WDS CS KKU
Web design technology | 2015 13
![Page 14: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/14.jpg)
Selection, Crop & Slice Tools
Retouch & Paint Tools
Drawing & Type Tools
Foreground Color & Background Color
Screen Modes
WDS CS KKU
Web design technology | 2015 14
![Page 15: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/15.jpg)
Layout Design Sketch
Digital Mockup
WDS CS KKU
Web design technology | 2015 15
![Page 16: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/16.jpg)
Example
http://i.ytimg.com/vi/1kW9LQ9hYK4/maxresdefault.jpg http://wwwimages.adobe.com/
WDS CS KKU
Web design technology | 2015 16
![Page 17: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/17.jpg)
Example
http://webdesignfan.com//
http://webdesignsurvivalist.com/ WDS CS KKU Web design technology | 2015 17
![Page 18: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/18.jpg)
http://vanimg.s3.amazonaws.com/
Example
http://bloomwebdesign.net/
Web design technology | 2015 18
![Page 19: Graphic, Color and tools](https://reader031.vdocument.in/reader031/viewer/2022030217/5886eb6f1a28abba528b5e99/html5/thumbnails/19.jpg)
Assignment#9 • Design your blog 2 pages (Homepage and
About Me using Photoshop)
Web design technology | 2015 19