Upload
dewey
View
48
Download
0
Embed Size (px)
DESCRIPTION
Web Programming 網際網路程式設計. Darby Chang 張天豪. Photoshop. Probably the most famous design software. Adobe yet another software monster (brought Macromedia) Dremeweaver , Fireworks, Flash, Illustrator, InDesign, … There are other software - PowerPoint PPT Presentation
Citation preview
1
Web Programming網際網路程式設計Darby Chang張天豪
Web Programming 網際網路程式設計
2
Photoshop
Web Programming 網際網路程式設計
3
Probably the most famous design software Adobe
– yet another software monster (brought Macromedia)
– Dremeweaver, Fireworks, Flash, Illustrator, InDesign, …
There are other software– CorelDRAW, GIMP, Painter, Paint Shop Pro,
PhotoImpact…Web Programming 網際網路程式設計
4
Again,
Web Programming 網際網路程式設計
this class does not teach you the details (I am not capable either) but aims to make you not afraid of them
5
Various design software Have different advantages
– vector graphics, visual effects (filters), web– choose the right/familiar one, some how like choosing the
programming languages More hateful, different architectures/design logics
– layer vs. object, gradient tool vs. gradient object…– it is harder than expectation to switch from one to another– the experts can do anything with their favorite tool, such as
Illustrator vs. Photoshop, so choosing a few you like to dig is enough
Web Programming 網際網路程式設計
6http://www.adobe.com/designcenter/keyconcepts/articles/concept_layer/concept_layer.gif
Web Programming 網際網路程式設計
Layer
7http://rainelaw.files.wordpress.com/2007/10/s-3.jpg
Web Programming 網際網路程式設計
Mask
8Web Programming 網際網路程式設計
9
Techniques in this example Fill layer Layer mask (raster vs. vector) Vector objects in Photoshop Filter Text Layer style Blending Adjustment layer
Web Programming 網際網路程式設計
10
A good start point Layers, Got to Love Them Blending is Fun The Lifesaver Adjustment Layers
There are astronomical tutorials for Photoshop, where Basix is a very good series
Web Programming 網際網路程式設計
11
Any Questions?
Web Programming 網際網路程式設計
About Photoshop
12
The second part of this slideDesign a jQuery plugin
Web Programming 網際網路程式設計
13
Design workflow Imagine Survey related tools Design the plugin interface The skeleton (jQuery defines it, don’t ask why) Actual coding
Progressively Enhance a Form to a Modal Form Web Programming 網際網路程式設計
14
There are many such tutorials Draggable Image Boxes Grid Flexible Slide-to-top Accordion Elastic Image Slideshow with Thumbnail Prev
iew
CODROPS, nettuts, … The workflow is similar and, as you see, the
creativity is much more importantWeb Programming 網際網路程式設計
15
Any Questions?
Web Programming 網際網路程式設計
16
Today’s assignment今天的任務
Web Programming 網際網路程式設計
17
Design logo or a jQuery plugin Design the logo(s) for your site/team by design software. If all of
your team members hate graphic works, please develop a new jQuery plugin (you can just wrap some existing function of your site).
Reference– Basix– CODROPS
Remember to send snapshots to TA and explain your progress (and how to test it) via email, in your homepage or, even better, in a modal dialog
Darby will check your web site at 23:59 1 Jan (Sun)
Web Programming 網際網路程式設計
18
Appendix附錄
Web Programming 網際網路程式設計
19
News of this week Social Web Design 社群網站設計
– co-work with Dept. of Industrial Design– aim for a professional site where, for example, database is a basic
requirement– more activities and bigger final exhibition
Final exhibition poster– any suggestions?
Sustainable management– discuss with me– submit a final report which is for those hardworking shy students
工程認證問卷Web Programming 網際網路程式設計
20
Students of this week Google Groups Considerations of new UI
– hard to implement, otherwise there should have someone done it– no ready package available since no one use– confuse users (learning curve)– using three checkboxes is very okay; you need very sufficient
reason to develop a new UI
– do you known which of the above four issues are more important?
Web Programming 網際網路程式設計
21
Schedule of the following weeksDate TODO2011/12/26 Today2011/01/02 Archive all your works in this class for
sustainable management (永續經營 ) or at least a functional demo site. This archive should include team introduction, site introduction (motivation, functions…), work arrangement, source code, install instruction and any other resource such as logo, video… of your web site
2011/01/09 Final exhibition2011/01/16 Deadline to submit the archive
Web Programming 網際網路程式設計