һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[̳] PSҳXXVIIIPSдһɾҳ

  []
19041716 happy175 2013-10-14 13:00:52
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
ΪߣƫġǿԲοһЩҳPS̳һ仰ʫףʫҲ
ϵеĽ̳ԴϵPS̳̣ǹģȫӢĵġ˳ԷЩĽ̡̳ΪޣϸϻдãϣѲߴͽ̡
Լ
photoshop CS5汾
2ԭ̵̳ĽͼӢĵģĻϣ½İͼ
3ԭЩûиڷԵ²ⶨһЩԺɫʾЩIJֱԺɫʾȷIJ
902223177ʾεϽǵǣ902223177
9022ʾεϽǵǣ9022ε̳Ѿָ
4ڽ̵̳ḽϱ˵ĵáЩǶԽ̳еһЩŻȡ


This is an intermediate level tutorial and some may seem to be tricky, but why not have a try? Let's get the ball rolling
һмˮƽĽ̳̺ͿǼֵģΪʲôأǹǵ

Step 1
1
Let's start at the beginning. Just fire up your Photoshop and create a new document (CTRL+N). See the parameters below.
ôʼ̡̳PSͼIJĵCtrl + N
08214905-7e2d74950125488d9e03191d08e38a80.png

Step 2
2
Now you should add some pattern to your background.
ڸıһЩͼ
½4px*4pxĵͼʾ
08222909-27b117d19fd24c40bfab86171794c8e1.png
ͼǦʹɫϵµĶԽߵɫ #efeeefϵ¶Խߵɫϣ #dfdddf£ #e7e6e7
08222910-e06a642f71ea4d7abd1169123bea5dee.png
༭ > ͼͼ
08222910-4d7d6ca6c565421d92eec2dc99ed6e26.png

ι½һΣ0010001170

Layer Style -> Blending options-> Pattern Overlay. Look at the screenshots below:
ͼ > ͼʽ > ѡ > ͼĽͼ
08222914-83d4b3f360e9470cae7c41123b21183d.png

08222914-72326737a1f042029468bc01dfdbf7c3.png
ҳ,
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
콵kpp 2014-5-2 12:14:05
| ʾȫ¥
Ƽ
ٶȹٷװˣǮyouqian.baidu.com뼼Աƹ
ٶǮע롿ԱѡٶǮװ ٶƹ
ٶɱ1Ԫ/װ/̨ٶʿ1Ԫ/װ/̨ٶ1Ԫ1Ԫ/װ/̨ٶ뷨0.1Ԫ/װ/̨
JJϷ5Ԫ0.5Ԫpps 0.5Ԫhao123ٶӰȰٶȹٷƷ½ƹ㡣
hao123ҳ 60-100Ԫ/1000IP/ս㡣
㣺ÿ5-10Ž㣬̨ϵͳתˣ1Ԫ֧
ٶȹ˾ٷˣҵñ֤۸ߣ㼰ʱ
ٶǮעַhttp://youqian.baidu.com
ȡעᣬٶǮƹ£


0U7GM99L        δ/ʹ        -        -
0U7K9143        δ/ʹ        -        -
0U826RAN        δ/ʹ        -        -
0U7JJIC7        δ/ʹ        -        -
0U7QRDW4        δ/ʹ        -        -
0U7XRVZV        δ/ʹ        -        -
0U7PBZRF        δ/ʹ        -        -
0U82AXPZ        δ/ʹ        -        -
0WC4TGHC        δ/ʹ        -        -
0WC33GPN        δ/ʹ        -        -
0WCCRJJ3        δ/ʹ        -        -
0WC1AOHI        δ/ʹ        -        -
0WCK0TXB        δ/ʹ        -        -
0WCBMDUV        δ/ʹ        -        -
0WC1PAI3        δ/ʹ        -        -
0WC4BLL0        δ/ʹ        -        -
0WCB3JWB        δ/ʹ        -        -
0WCDLK0S        δ/ʹ        -        -
0YI2UYVR        δ/ʹ        -        -
0YI21EST        δ/ʹ        -        -
0YI21EST        δ/ʹ        -        -
0YI31JXH        δ/ʹ        -        -
0YIF5SXQ        δ/ʹ        -        -
0YIBTVDN        δ/ʹ        -        -
0YICUDMP        δ/ʹ        -        -
0YICH4XB        δ/ʹ        -        -
0YID6KZZ        δ/ʹ        -        -
0YI4FEMF        δ/ʹ        -        -
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:05:16
| ʾȫ¥
Ƽ
Step 88
Social media connections are very useful and important for every website. That's why today we'll also learn how to create a simple Facebook button. Again with the help of the Rounded Rectangle tool (radius - 3px), we'll create a button
ÿһվ˵ýǷdzúҪġΪʲôǻѧϰδһ򵥵 Facebook ťٴԲǾι뾶3px һť40168626
13101250-4b0c0446bfce49bb990bb4ab2ab14d1a.png

Then use the Rectangle tool (rounded) to create a square (holding the Shift button) with the following size C 16px
ȻιԲǾιһΣסShiftߴ磺16px
13101251-7f21eb0f2dc64ca9812224770de479dc.png

Choose the Pen Tool and cut off half of this square.
ѡֱʹȻеεһ롣עһֱѡ񹤾Ƚϼ򵥣ֱѡ񹤾ѡε½ǵĵ㣬Deleteɾ͵õһ
13101253-12ae91dd65434897830a1c5afd1f5cd2.png

Edit-> Transform->Rotate to move this triangle and place it on the left side of the rectangle
༭ > 任 > תתΣƶε
13103034-9e44c8d706974604aad5d57d78201cb0.png
13103038-9f44ea883329430da662ef300c882b15.png

Select all your "Facebook" layers and merge them (Ctrl+E).
ѡеFacebookͼ㣬ϲǣCtrl + E

ͶӰͼʽ
13103102-10447a01299a4994b31f00cf71906dcb.png

Blending Options-> Inner Shadow:
ѡ > Ӱ
13103114-8f8894fac04b417cb48c3563b7d6d6f8.png

Blending Options-> Color Overlay (#c1cac5 )
ѡ > ɫ#c1cac5
13103132-9584cacc1fd54a7982c4223ed8f43dc6.png
13103133-1139f502bfd94b139921fbe41522eedf.png

Now add the "follow" text to our Facebook button and play with its blending options.
Facebookťfollow֣µͼʽ壺Aller 壬ֺţ14px
13103154-b1e2022b3e1f4389b6e0fb1d5e57c081.png
13103156-14b4d7cd95a3460d8e537c28c4ee5e0f.png

Try to create your Facebook logo for this button. For example, you can create the "F" letter, decorate it with a blue color (#5a90e5).
İťFacebook LOGO˵ԴĸFһɫ#5a90e5
13105716-b2bff8ca06974f0db5200e563680894f.png

Play with Blending options (add a white shadow)
µͼʽһɫӰ
13111842-ec55ffc91f4548f8bb3fc1139461632b.png

WOW! We did it Look at the final result of our menu bar:
รˡɵİť
13111843-f02f803a672e430ebe0541279817ac35.png
   
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:08:21
| ʾȫ¥
Ƽ
Step 18
18
With the help of a clipping mask, insert the image into the square.
Ϊ˴ɰ棬ͼƬ뵽εĵط

As you can see, you really can use this block for all sorts of purposes. Result:
Ծʹ顣
13173034-a08802782730454a871ae5ce6686f0af.png
   
Step 19
19
The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer.
ҳҳźͷͬҪˡԼϣķߵҳĵײʱʲôĴ𰸾ҳŵΰ㡣

Now it is time to design a cool footer for our cute website layout. Let's make it bright :)
ʱǿɰվֵĺܿҳšʹ
13173037-bf97f8866e87466992c52596eee15653.png

Add some gradient, for example #3a8df1 - #6bafff, and inner shadow
һЩ䣬磺 #3a8df1 - #6bafffӰ
13173038-9932e2ad7286430288234515a339eeac.png
13173039-bfd56ff4e74c4b1f9fa29d1a925410eb.png
13173040-063ed53bcabd48dc81afff1f7db7060e.png
13173042-69ee74bf66284c8787dc6f9755313288.png

Step 20
20
We'll add three blocks into our footer: Quick links, About Us and Follow Us
ǽҪҳ飺Quick linksAbout UsFollow Us

Use the Arial Regular font for titles (30px) and add styles as on the screenshots below:
Arial Regular壨ֺţ30pxսͼʽɫɫ
13173044-cafb3844fab24b0a9c936a73fcd99d8d.png

Use the Arial Regular font for the text in the About Us section (12px).
About UsArial Regular壨ֺţ12px
13173044-2ca5075139814c4ea193a3774ba5ba24.png

The text for the Quick Links section - 22px.
Quick Linksֵֺ֣ţ22px
13173044-9d7369ac3d2641cc9d2906f04cded990.png

Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter
FollowһЩ׼ͼ꣺RSSGoogle Plus+Twitter
13180445-c4c3cebfa4404a9ebdac46a1d590ef02.png

Woohoo! We did it! The final result of our tutorial:
รǽ̵̳Ч
13180451-d2244d14d596400b930d10625945e42a.png

ǣ
ҳķˬûвʲôļһЩļͼʽɰȣЩ򵥵Ĵ䣬˲һˬڷĹУijЩҲһЩʹ俴Ӻ

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:03:00
| ʾȫ¥
2F
Step 3
3
We want to create an awesome design, yeah? That's why we should use a grid system for designing. You can easily create a solid visual and structural balance of websites with grid-based designs.
ǽһܰƣΪʲôҪʹϵͳơɵشƵĽṹƽʵڵӽǵվ

Put some grids to your design with intervals of 60px and 20px.
һЩοߣ60px20px
ֱοߵֱ203090110170190250270330350410430490500510570590650670730750810830890910970980
10224122-c584acd8d6064e20bfaf14d35081c2b8.png
   
Step 4
4
So... now it is time to design the menu of your future website. Use the Rounded Rectangle tool to create it (radius - 3px). The width of your menu is 940px, the height is 34px.
ôδҳIJ˵ʱˡԲǾιһԲǾΣ305394034뾶3pxIJ˵Ŀ940px߶34px

I think that it is an easy task to create a website's menu. To be sure, look at the images below:
Ƿdz򵥵ĹȥһҳIJ˵ţοͼ
10224122-f1c2d3110fcf4541b4100a4ddfcb6cd5.png
10224125-0d762c42d1d64cb7b0c684bc834cb638.png

To make this menu more eye-candy, go to the Blending Options -> Drop Shadow. Use the settings that you can see on the screenshots:
ǵIJ˵ۣѡ > ͶӰĽͼòͶӰɫ #47493c
10224130-c25f3a4f9ca34cffba34f2024b839b20.png

Blending options-> Inner Shadow
ѡ > Ӱ
10224135-c72b8999b522426fbeda8a9f2c2bb2d2.png

I chose the #6bafff color for this menu bar.
Ҹ˵ѡɫ #6bafff
10224139-b74fbef0868a444799f045abfb4690f7.png

10224143-5e42a3d44f4b45f59ccce077a949690b.png

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:03:42
| ʾȫ¥
3F
Step 55
Let's add some text to our menu. Use the Horizontal Type Tool for it.
ˮƽֹӲ˵ϵֱHOMEABOUTCONTACTBLOGPORTFOLIO

You can create your design with any font you like. I used the Aller [bold] font. The size is 14px.
ʹκϲ塣õAller塣ֺţ14px
11220218-99fad54886cb4e469db33fa94407e15e.png

˵µͼʽͶӰɫ #010101
11220219-58c5d46919e34d8b9a101c183d17e7a9.png

11220220-84fde2ef1b47442a8434297d5bd2d7f5.png

Step 6
6
All the menu buttons are links and the designer should show how their hover state looks like. So, create are rectangle (the color that I've used for it is #5a90e5).
еIJ˵ťӣҪչʾ˵״̬ӡԣ281536834õɫ #5a90e5
µͼʽӰɫ #312d20
11220221-ea72080490be4fd292afa45efeda0bbf.png
11220222-a8244ae59be3482b8558bfd06779611d.png

Our result:
ǵijɹ
11220223-929316fcc407419baf4e00d85584bb2f.png
   
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:04:30
| ʾȫ¥
4F
Step 77
Every decent website has a search form. Let's create it too
ÿҳһҲһ

Use the Rounded Rectangle tool (radius - 3px) to create a search form with the following dimensions: 124px and 26px
ԲǾιߣ뾶3pxһ8081712426ߴ磺124px*26px
11224641-2713544ed3864f80b1a553e15c9c19d9.png

ͶӰͼʽ
11221626-358d0fb166d840469b89e4e0a5a5743d.png

Add some inner shadow: Blending Options-> Inner Shadow
һЩӰѡ > Ӱ
11221627-2deb207a79494db581a938cacd49a754.png

Blending Options-> Color Overlay, color- #5a90e5
ѡ > ɫɫ #5a90e5
11221628-08e76ddbc4b84e3b8bf3b41ba3a00133.png

11224641-72d0eedf85df445292ffa295f80c616f.png

Use our favorite Photoshop tool one more time Create one rectangle with dimensions 41px and 32px
ٴʹPSеʷߣһԲǾ929144132ߴ磺41px*32px
11224643-4922a43204ec47b8843ab2c8b447ccb4.png

Blending Options -> Drop Shadow
ѡ > ͶӰɫ #47493c
11224644-425f139122ea4aa8bec5c6a757a42252.png
   
Blending Options -> Inner Shadow
ѡ > Ӱ
11224645-eb9ae2f69cfd40f58bbac9608dda5683.png

Blending Options -> Color Overlay (color - #6bafff)
ѡ > ɫɫ #6bafff
11224646-df8cf940130b4ddd9cf0f30df8822c77.png

11224647-2b7ca2da469945b489df135f01bc413f.png

Now it is time to use icons that we've downloaded at the beginning of this tutorial. Open the "Linecons Free - Vector Icons Pack and find the search icon there. Just apply some bells and whistles to it.
֮ǰصͼˡLinecons Free - Vector Icons Packҵsearchͼ겢һЩڵʽ
11224648-915d13f912eb48d699df50f7a4212b4c.png
11224649-efd9b5b81b3c44469a56f461877f47fc.png

Here is our final result for the search form:
ս
11224650-48d4ce5edbea4a1ba933571e49596653.png
   
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:06:02
| ʾȫ¥
6F
Step 99
Create a new shape: width 940px, height 372px
һµ״ԲǾΣ뾶3px30102940372940px372px
13111845-5ff5632f28bb49ef98f11b1568d329f9.png

As always, add some shadow:
ͬһЩͶӰͶӰɫ #47493c
13111852-e26df6a926b0416d98f17dcfe5fb3f63.png

And a border: Blending Options-> Stroke (20px, color- #6bafff)
һߣѡ > ߣ20pxɫ #6bafff
13111856-eb7fcf7da6c0410a8d4a446b73b6069d.png
13111901-eba879faa0444676bbbb40458e455c15.png
   
Step 10
10
To create nice slider, we should add some images to it. With the help of the Ctrl+Alt+G shortcut,create a clipping mask.
Ϊ˴ƯĻҪһЩͼƬÿݼCtrl + Alt + GǴһɰ
13111922-7ed665ffda2040a28daf4a208e834297.png
   
Step 11
11
Use a bunch of free icons again. I've selected the following icons: "settings","bubble", "photo","world"
ٴʹһѵͼꡣѡЩͼ꣺settingsbubblephotoworld

Add them to our design (don't forget to use the grid), distance C 180px
ӵǵУòοߣ룺180px
13115417-15e2690628cd40689d4aa56951164dce.png
   
Step 12
12
Add some text. You should use the same font that you used for your menu bar. Set the font size to 30px.
һЩ֡ʹúͲ˵ͬ塣ֺΪ30px
13115420-ad886426fb954003a51eb9650d6bc6c7.png

Play with Blending Options: add a white shadow, color overlay ( #6aaefd) and an inner shadow.
ӻѡӰɫͶӰɫӣ #6aaefdһӰ
13115422-8959514586924cc18c11c397ede443ea.png
13115424-8b399840b7ac4075bf9f02506f51d839.png
13115425-3ebd07331dfd49abadd2801532047844.png

Copy the styles of this layer and add it to all your icons:
Ƹͼʽӵеͼ

WOW! Look at this amazing result!
รĽ
13115428-6e15f09111a845a4a323fa8efeeff91e.png
   
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:06:45
| ʾȫ¥
7F
Step 1313
Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.
ЩУÿп240pxһЩloremipsum֡ÿеֶһֵɫ #4c1b33ͶӰͼʽ
13115430-b50105998aa1472da5fc6a9756472524.png
13115433-e71a6bbdebed4b9399807cff294360e5.png

Step 14
14
Create a Read More button with the help of the tools that we've used before.
֮ǰʹùĹߣԲǾιһRead Moreť3069212535
13121657-a4e904dd304040df9949f1665d10191d.png

Blending options-> Inner Shadow, Drop Shadow, Color Overlay (#919392).
ѡ > ӰͶӰɫ#919392
13121658-b0e15b9887e14f3f957d70ba6b81008c.png
13121659-91d4914780484e8cb4a8613527348504.png
13121701-5bcd71b26a9d4ed896540af8cb121e3f.png

ͬģťֱǣ240692125355106921253575069212535
13121703-5b7832b4a8d54377be5a14022b4c5dbc.png
   
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-10-14 13:07:29
| ʾȫ¥
8F
Step 1515
Add the "Read more" text to our button.
ǵİťRead more֣ͶӰɫӵͼʽ
13121705-d2ac568de5ff4de0b41385b4951330b0.png
13121706-6e25fb5b327a47b6af7df730cc612cda.png
13121709-26ffa4d054314167935eefef19665a7d.png

Step 16
16
Now we should separate the main content of our future website. Create a 1px line and add styles of your "read more" layout to it.
ӦðδվҪݷֿһ 1px ֱ307479401Read moreͼͼʽӵճͼʽ
Ϊ÷ָ߸һ㣬ҪӰͼʽ
13123923-0bc35bb5a725491794af783a2e8e0426.png
13123923-eaacfad4812c4cae850c38d7b1f903be.png
   
Step 17
17
Your next block can be a section entitled "Partners" or you may want to showcase your latest blog posts.
һֿһΪPartnersݻҪչʾµIJ¡

Use the Rounded Rectangle tool to create a square (hold down the Shift button).
ԲǾιߴһΣסShift30768

Radius - 3px, width and height - 138px.
뾶3px͸ߣ138px
13173028-ecc0dde7f67c434885d65e2eb135222f.png

Go to Blending options -> Stroke to create a border with the settings below: Size- 20px, color #919392
ѡ > պIJߣߴ磺20pxɫ #919392ͶӰʽ
13173029-2bb31fd63d4d48649c2d0d227f613714.png
13173030-a77fa3ea37164008bb24762f35dc9d0f.png
13173030-c9f813ea52b24a3897f332cfb3783a31.png

Copy and paste this element 5 times :) Place these squares with the interval of 20px.
ճ5Σü20pxIJο߰ڷЩ
13173031-aa6a9bc0b673449b963d9187dd6232db.png

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
2014-4-1 10:36:16
| ʾȫ¥
10F
ĺ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
12һҳ
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2017-7-26 18:43

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б