Photoshop设计草稿

By
Yang
on February 15, 2007 11:38 AM | | Comments (21) | TrackBacks (0)

每次我在做网页设计之前，都会做些准备工作。其中的一项就是画个草稿。

对于设计样稿，我没有专门学过什么。在最初喜欢上页面设计之后，我不知道如何开始，一直在想，怎么样画草稿呢？也没有搜索过什么教程之类的，但有次好像听到过用Photoshop来画，于是我就开始学习这玩意了。

我也看过别人在纸上画草稿的，但我没有做过。虽然有些艺术效果，但和实际效果差距很大，也不好修改，形成网页效果最终还是要通过制图软件完成。但在纸上画个大概的结构和颜色搭配，再用Photoshop来实现效果也是个好办法。

为了省事，我就直接在Photoshop上画了，不好，就删掉再重新建一个文件就是。

用Photoshop画设计样稿有几个好处。

首先，对于各方面的修改和调整非常简单而效果一目了然。

其次，Photoshop本身的强大功能可以达到各种想要的效果。草稿定稿后，即从草稿输出各个页面元素。

第三，充分利用软件中的创建新图层功能。无论用它来做其它方面的图片处理还是画设计稿，一定要善于和习惯创建新图层。这不光是起到保护设计中的其它部分的作用而且还非常方便修改。当你对页面的某一元素或部分有几套设计方案时，除了创建新文件，还可以通过创建新图层来实现。在不同的图层作出不同的设计方案，隐藏一个，显示另一个，你就可以容易看到孰优孰劣。

第四，利用好图层组。将某一局部的相关设计图层安排到一个图层组中，比方页面头，有背景，logo等元素的相关图层，把它们放到图层组后，就方便识别和管理了。

事实上，我不是Photoshop行家，只会一点基本的使用。我用这点有限的基础尽量使页面好看点。

zucai zucai-

在Movable Type的模版设计中，我也是用Photoshop完成草稿的设计。去年设计的“足彩博客”，后来我不满意，撤下来了，觉得与主题不相称，缺乏一点喜气。上个星期重新画了个草稿。感觉好像是活跃了点。到目前为止，还只是草稿，很多细节还没有画，更没有来得及写html和css。顺便把前几天画的PSD文件传上来，给不熟悉的朋友做个参考。若是不幸被高手看到了，一定得好好批批。

Categories:

0 TrackBacks

Listed below are links to blogs that reference this entry: Photoshop设计草稿.

TrackBack URL for this entry: http://www.yangkang.org/cgi-bin/mt/mt-tb.cgi/86

21 Comments

By leavic on February 15, 2007 4:44 PM

看來眾人的呼喚起作用了。
其实用PS做设计是我最想学的，杨兄能否配合一个实例讲的深入一点？

By leavic on February 15, 2007 4:45 PM

每次都是面对一堆代码，一边改一边看效果，那种感觉太差了，可惜就是不太会PS,很惨啊。

By Sparanoid on February 15, 2007 5:29 PM

你上传的 psd 档有问题，打不开？

By Yang on February 15, 2007 5:49 PM

Leavic, 好啊！回家了吧？接下来我得好好把前段时间的缺失补点回来。
Sparanoid，你提醒我才发现那个文件坏了，可能是我压缩出了错。还是不压缩了，就是有点大,1.5M。

By y0ungs on February 15, 2007 8:10 PM

呵呵，记得以前我用firefox做
做完了就切片，把白色的留作文字的内容全部删除
可惜那样总是有好多的表格。ps只做大幅的图片才用
我觉得firefox还是方便点。

By 黑羽 on February 16, 2007 4:13 PM

掌声鼓励！
上半年我可能有空会去上海玩儿，到时候找你玩儿。^_^

By Yang on February 16, 2007 4:38 PM

好,你来了上海我请你喝酒!

By Zou.Yun on February 21, 2007 8:27 PM

老杨阿！拜个晚年了，在家不能上网，不是很方便了。“猪”事大吉！

By horwa on February 22, 2007 8:07 PM

你终于过来写东西了。

By Zhong Yi on February 27, 2007 10:09 PM

我试了leavic提到的phproxy,效果不错:
http://www.5izy.cn/poxy/
现在可以正常访问http://en.wikipedia.org/wiki/Main_Page

By dimlau on March 17, 2007 1:46 PM

...支持


我用golive+photoshop

By yangyang on May 22, 2007 12:07 AM

回3楼信息！PSD没有问题，可以下载

By 源子 on June 20, 2007 12:21 AM

你这个psd算不上完整的PSD，很多图层都是已经被合并过了，效果的制作都没有来路了:(
1.5M已经是很小了，我弄的PSD基本超过20M，不过都是在PS照片的时候。

稍稍帮你改了下，做个参考吧。
预览： http://www.shadowsky.cn/image/2007/other/zucai.jpg
有兴趣可以看看修改过的psd: http://www.shadowsky.cn/image/PSD/zucai-2.psd

无意从小勤勤那过来的，问候一个。

By OHR on October 1, 2007 2:13 PM

Photoshop也可以直接输出的啊，你可以直接把它输出，它会自动把图片裁剪成一块一块的，以适用于网页

By 17 on February 18, 2008 4:59 AM

˫гƷ
׼ݰ³Ʒ̣ͼ۸񣬷ڳƷ̾ͽӭ磬ѯwww.womenbox.com.cn

By 423 on February 18, 2008 7:58 PM

˫гƷ
׼ݰ³Ʒ̣ͼ۸񣬷ڳƷ̾ͽӭ磬ѯwww.womenbox.com.cn

By 15 on February 19, 2008 10:54 AM

Ʊ/Ƶ߲ѯ,Ԥ,Ʊ,ƱƷۻ,Ƴù,鶩Ʊ,ѯ,⳵
ﺽշ޹˾20025£йֺܾ񺽻׼ĹڷɻƱ˾ǹʺЭᣨIATAԱDZտͻЭԱҹ˾Գ߷ʵȡ˽ϺõijɼҺչ˾磺йʺչ˾йϷչ˾йںչ˾йչ˾йϺչ˾ȹ˾ĻƱǰéҹ˾ּ۸񹫵ܵԭʼάÿ͵ΪּӮÿ͵ĺǽһڹоԼIJ㣬ͬʱŵ㣬˵ı׼ҪԼȡĽ
ַ:www.etpiao.com ȫͷ绰4006500402
ַԶ2ͨ۴206

By 504 on February 19, 2008 6:18 PM

ɽ۩ƿרҵֲƿƿͷƿƿȣɸݿͻҪ ֻ13561346979 MSN/:xscqlove@126.com ַwww.zhbljt.cn QQ:564833861

By 897 on February 19, 2008 9:28 PM

ɽ۩ƿרҵֲƿƿͷƿƿȣɸݿͻҪ ֻ13561346979 MSN/:xscqlove@126.com ַwww.zhbljt.cn QQ:564833861

By 531 on February 20, 2008 5:19 AM

ȫFLASHСϷ,СϷҪ˫ࡢࡢࡢðࡢࡢࡢࡢࡢĥԼʵŮСϷͰСϷ,PKСϷר,..
Цflash,רΪռᡢµĸЦflash,flash,flashСϷ,СϷ,СϷ,
μ www.flashnb.com

By 620 on February 20, 2008 4:55 PM

ϺIBMʼDZά޷
ͻߵ绰021 64865667 54246961
ά޵ַhttp://www.pc1998.cn
ά޲ַϺϵ·228Ū11003
ص㣺Ϫ··ڽƵߵһ¥10¥һһվųڶ
ϵ:Ф
ǵƣ
רҵѴͬƷƣIBMۺ޵ɫ쳵ųںϵ
ӵжԱӵоտάޡά飬ά޵Ĺ˾мټңл˷ḻľ飬ԤʱݣѴͬƷơ
ѸټʱĽ
ǵļԱϸѡרҵѵӵжĹ飬ݡǵּʱݡЧ
ѡǣѡ˷
ԼƸ뼼Աͬʱά޴ӡ塢ʾȲҲͬʱøָãԼָϵͳװáǽһ㣬ÿһ͵ķרҵĹʦǾ͵֧Ŷӡ
˽ͻͻķ
ͻ"ģһСʱ׬ܶǮ"ǹ˾ʱʱ̿Ϊ룬߷ٶȡ̬ȣ ͻķӳֵķѡǣõõķ ijɹ벻֧֣
õרҵķװĵ
ĴȫԶbga豸,ѸٽʼDZϱ,ԿоƬbag,ȫɿרҵѸ,˱ʼDZ޸ʡ
.:ҪΪibmʼDZά޹(ibm dvd ,ibm cd ,ibm combo ר)
.:ibmʼDZάҺʼDZ,Һ,lcd,,ƹܲ,ѹ岻,Һˤ,,,,,,Һ,,,,,,һ,һ,ڰ,Һ˸,10.6,11.1,12,13.3,14.1,15.4,17,,ھ,,,,,,(ҹ˾ṩҺ:10,6,12,13.3.14.15.17.ȸֿ)ά޼۸
.:ibmʼDZά޵أزõʱ,岻ϵ()
.:ibmʼDZά,㲻,ˮ, Դָʾ,岻,ʱ,е㲻,ۣ
ۣ
.:ibmʼDZά:߶,,ۣ
.:ibmʼDZά:ѣۣ
.:ibmʼDZά޵ƹ,Һ,ϰ벿,°벿ƫ,ۣ
ۣ
.: ibmʼDZάǣۣ
.:ibmʼDZԼά:,̽ˮ,̱:,̼ñʧ,򲻳,̱,̽ˮά 10: ibmʼDZӲά,岻Ӳ,Ӳ̲װϵͳ,Ӳϵͳ ,Ӳл,Ӳ̸¸ ۣ
.:ibmʼDZԿάޣ
IBMʼDZͣ
ThinkPad A20m ThinkPad R30 ThinkPad T20 ThinkPad X20
ThinkPad A20p ThinkPad R31 ThinkPad T21 ThinkPad X21
ThinkPad A21m ThinkPad R32 ThinkPad T22 ThinkPad X22
ThinkPad A21p ThinkPad R40 ThinkPad T23 ThinkPad X23
ThinkPad A22e ThinkPad R40e ThinkPad T30 ThinkPad X24
ThinkPad A22m ThinkPad R50 ThinkPad T40 ThinkPad X30
ThinkPad A22p ThinkPad R50e ThinkPad T40p ThinkPad X31
ThinkPad A30 ThinkPad R50p ThinkPad T41 ThinkPad X32
ThinkPad A30p ThinkPad R51 ThinkPad T41p ThinkPad X40
ThinkPad A31 ThinkPad R51e ThinkPad T42 ThinkPad X41
ThinkPad A31p ThinkPad R52 ThinkPad T42p ThinkPad X60
ThinkPad R60 ThinkPad T43 ThinkPad X60s ThinkPad R60e
ThinkPad T43p ThinkPad T60 ThinkPad T60p
IBMʼDZͣ
Ҳ ෴ زܳŵ
ص оϻоʧЧѹ ԴߣԴ
оϻоʧЧ·޷ů ӿڣ
޵Դ ӿڣϣԴ Զ ϣ
Զظ ϣԴ ϵ ӿڣ
ӿڣϣԴ ޷ػ
޷ɵؿ·𻵣 ϣ
ڴ ޷CD-ROM 𻵣
CD-ROM 𻵣 DVDԲ 𻵣
CD-ROM/DVD Զ CD-ROM/DVD ޷
CD-ROM 𻵣
ʧЧ ϣ̹ ʧЧ
Ư ָʧЧ ָʧЧ
ָƯ ָʧЧ ӼЧ ̽ӿ
Ч 𻵣 ȱ
Ļйʾ ϣĻʾȶ ϣ
Ļͼ ϣĻͼ񶶶
ĻͼŤ ϣĻʾ ϣ
Ļ lcd Ļ lcd ĻȲ
Ļˮƽ lcd Ļдֱ lcd Ļ
Ӳ޷ʶ Ӳ̹ϣ ¶ȹ ȹ
Ȳת ȹϣ ȹ
ʧЧ ӿ𻵣 FAX/MODEMʧЧ ӿ𻵣
PCЧ PC𻵣 PC޷Ƴ PC
, COMЧ ӿ𻵣
ӡЧ ӿ𻵣 USBӿЧ ӿ𻵣
1394Ч 俨Ч
cmosʱ䶪ʧ cmosʧЧ Cmosʱ䲻׼ cmosʧЧ
ϵͳ ϵͳܲȾ
ʧ
̫ Ļڿѣ2ſ,Bǣ ޲
ѣ3ſ,Cǣ ޲
׿ѣ4ſ,Dǣ ޲
Ļ ޲
Ļ ޲
IBMʼDZά޹ؼ
ʼDZά,ά,ϺʼDZ㲻ά,ϺʼDZά,ϺʼDZˮά,ϺʼDZά, Ϻibm,ibm,Ϻά,ibm,άϺ,Ϻibm,ά,ibmϺά, ϺibmʼDZά,ibmʼDZϺά,ϺibmʼDZά,ϺibmʼDZά,ϺibmʼDZҺά,ϺibmʼDZӲά,ϺibmʼDZά,ϺibmʼDZά,ϺibmʼDZά,ϺibmʼDZά,ϺibmʼDZά,ϺibmʼDZԴά,ϺibmʼDZά,ϺibmʼDZlcdά,Ϻibmά,ϺibmʼDZά,ϺibmʼDZά,ϺibmʼDZά,ϺibmʼDZά,ibmʼDZά,ibmʼDZά,ibmʼDZά,ibmʼDZά,ibmʼDZά,¬ibmʼDZά,ibmʼDZά,բibmʼDZά,ibmʼDZά,ibmʼDZά,ֶibmʼDZά,ɽdibmʼDZά,ζibmʼDZά,ibmʼDZά,ϺʼDZά,Ϻά,ϺʼDZҺά,ϺʼDZӲά,ϺʼDZά,ϺʼDZά,ϺʼDZʾά,ϺʼDZά,ϺʼDZ
ά,ϺʼDZά,ϺʼDZά,ϺʼDZά,ϺʼDZά,ϺʼDZԵ㲻ά,ϺʼDZԽˮά,ʼDZά,ʼDZά,ibmʼDZά,ibmʼDZά,ibmʼDZά,ibmʼDZά,¬ibmʼDZά,ibmʼDZά,բibmʼDZά,ibmʼDZά,ibmʼDZά,ֶibmʼDZά,ɽibmʼDZά,ζibmʼDZά,

Leave a comment

Search

About this Entry

This page contains a single entry by Yang published on February 15, 2007 11:38 AM.

2006年Time年度人物 - 你 was the previous entry in this blog.

我想给北极熊买啤酒 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.