All Blog
iMac Text
1. พิมพ์ข้อความ ผมใช้ : TG ใช้ฟร้อนท์"Lucida console"สีของฟร้อนท์จะใช้สีอะไรก็ได้ครับเลือกสีที่เราชอบได้เลย

2. ตอนนี้ไปที่Blending Options (คลิกขวาที่ text layer)
เลือก (และแก้ไข) ต่อไปนี้:

Dropshadow, ใช้สี # 4B6B95
Innershadow, ใช้สี # 304B98
Outerglow, ใช้สี # 44CAFE
Innerglow, ใช้สี # 314E9A
Bevel และ emboss
Contour และ double click กล่องเครื่องมือเล็ก ๆ และคุณจะเห็นดังนี้ :


3. สร้างจุด เพิ่ม 2 จุด เพื่อให้มี 4 และแก้ไขค่า input-output ตามนี้:
point 1: input: 0% output: 0%
point 2: input: 27% output: 4%
point 3: input: 59% output: 56%
point 4: input: 100% output: 99%

ก็จะได้ลักษณะแบบนี้:


4 เลือก satin, เปลี่ยนสีเป็น # 60ACFF และเปลี่ยน contour เป็น "ring"
และขั้นตอนสุดท้าย เลือก color overlay และเปลี่ยนสีเป็น # B7E1F7

Cradit: tutorialguide.net



Create Date : 28 เมษายน 2553
Last Update : 28 เมษายน 2553 16:18:49 น.
Counter : 466 Pageviews.

0 comment
ขนาดของ Banner มาตรฐาน

ในเว็บไซต์ต่าง ๆ นั้นมีการติด Banner กันอยู่มากมาย หลากหลายสีสัน หลากหลายรูปแบบ ทั้งแบบเป็นภาพ Gift Animation หรือภาพเคลือนไหว แบบ Flash และภาพ Banner ของแต่ละเว็บไซต์ก็มีขนาดที่หลากหลาย แต่จริง ๆ แล้ว Banner นั้นมีขนาดที่เป็นมาตรฐานกำหนดไว้เหมือนกัน


ทำไมต้องมีการ กำหนดขนาดมาตรฐานของ Banner ?


เนื่องมาจากการทำภาพ Banner นั้น บ้างครั้งเราไม่ได้ติด Banner เฉพาะในเว็บของเราเท่านั้น แต่ในบางครั้งเราก็เอา Banner ไปติดในเว็บอื่น ๆ ด้วย เช่นในกรณีเราติด Banner โฆษณา หรือกรณีเราแลกลิงค์ Banner กับเว็บไซต์เพื่อนบ้าน

หากเราไม่ได้ กำหนดมาตรฐานไว้ว่า Banner ที่จะเอาไปติดในเว็บไซต์ต่าง ๆ ควรมีขนาดเท่าไหร่... ในกรณีที่เราต้องเอาแบนเนอร์ไปติดเว็บอื่น ๆ ก็อาจจะเกิดปัญหาว่าเอา Banner ไปติดแล้ว Banner เราเล็กเกินไปบ้างล่ะ (เหลือพื้นที่ตั้งเยอะ) หรือ Banner เราใหญ่กว่าบ้างล่ะ (ทำให้ Layout เว็บเสียหาย) ซึ่งจากทั้งสองแบบ ผลเสียที่เกิดขึ้นคือ ทำให้เว็บไซต์ดูไม่เรียบร้อย ดูไม่สวยงามดังนั้น จึ่งได้มีการกำหนดขนาดมาตรฐานของ Banner ขึ้น เพื่อให้เป็นมาตรฐานสากล และเพื่อที่ผู้จัดทำเว็บไซต์จะได้วางแผนวาง Layout พื้นที่ต่าง ๆ สำหรับวาง Banner ทางหน่วยงาน IAB (Internet Advertising Bureau/Coalition for Advertising Supported Information and Entertainment) จึงได้กำหนดมาตรฐานของขนาด Banner ขึ้น ซึ่งมี Banner ขนาดมาตรฐานทั้งหมด 8 ขนาด ซึ่งเป็นขนาดที่ได้รับการยอมรับกันอย่างเป็นสากล ซึ่งประกอบด้วย Banner ขนาดต่าง ๆ ดังนี้


1. Banner ขนาด 120x60 pixel เป็น Banner ที่ถือว่ามีขนาดเล็ก แต่ก็พอที่จะนำเสนอข้อมูลได้ ส่วนมากมักนำไปวางในพื้นที่ที่เหลือเป็นช่องวางเล็ก ๆ

2. Banner ขนาด 234x60 pixel เป็น Banner ที่ได้รับความนิยมในปัจจุบัน เพราะมีขนาดที่ไม่ใหญ่หรือไม่เล็กจนเกินไป สามารถนำเสนอข้อมูลในดี และสามารถนำไปจัดวางได้ในทุกที่ของเพจ

3. Banner ขนาด 120x240 pixel เป็น Banner แนวตั้งที่มีขนาดใหญ่ มักนิยมนำไปติดในบริเวณขอบด้านข้างของเพจ (ขอบด้านซ้ายหรือขวาก็ได้แล้วแต่สะดวก) เนื่องจากเป็นการใช้พื้นทีในแนวตั้งของเพจ จึ่งไม่เป็นการรบกวนเนื้อหาขอมูลในส่วนกลางของเพจ

4. Banner ขนาด 125x125 pixel เป็น Banner ที่ได้รับความนิยมอย่างมากเนืองจาก Banner ขนาดนี้สามารถวางได้ทุกตำแหน่ง ไม่ว่าจะเป็นขอบด้านซ้ายหรือขวา หรือบริเวณส่วนกลางของเพจ อีกทั้งสะดวกในการจัดวางเนื่องจากสามารถเรียงแสดงได้ทั้งในแนวนอนและแนวตั้ง

5. Banner ขนาด 88x31 pixel เป็น Banner ที่มีขนาดเล็กที่สุด ในบรรดา Banner มาตฐาน เป็น Banner ที่นิยมนำไปใช้สำหรับแลกลิงค์กับเว็บไซต์ต่าง ๆ เนื่องจากมีขนาดเล็กมากจึงมักนำเสนอข้อมูลได้น้อย

6. Banner ขนาด 120x90 pixel เป็น Banner อีกขนาดหนึ่งที่ได้รับความนิยมในปัจจุบัน ส่วนใหญ่แล้วมักนำไปวางในส่วนขอบของเพจ หรือในบางครั้งอาจแสดงในส่วนกลางของเพจ ซึ่งก็สามารถแสดงผลเรียงได้ทั้งในแนวนอนและแนวตั้ง



7. Banner ขนาด 392x72 pixel  เป็น Banner ที่ถือว่ามีขนาดใหญ่ แต่ไม่ค่อยได้รับความนิยม จึงพบเห็นได้ไม่บ่อยหนัก



8. Banner ขนาด 468x60 pixel เป็น Banner ที่ได้รับความนิยมมาก เป็น Banner ที่มีขนาดใหญ่จึงทำให้สามารถนำเสนอข้อมูลได้เยอะ และเห็นได้จัดเจน มักถูกนำไปติดในบริเวณส่วนบนสุดหรือล่างสุดของเว็บเพจ


Cradit :: thainextstep



Create Date : 28 เมษายน 2553
Last Update : 28 เมษายน 2553 14:45:06 น.
Counter : 936 Pageviews.

0 comment
การทำปุ่มใส สไตล์ Glossy : Photoshop
สวัสดีครับ เนื่องจากวันนี้โลดแล่นอยู่ในอินเตอร์เน็ตเป็นเวลานาน
ก็เลยไปเจอเทคนิคสวย ๆ เกี่ยวกับการทำปุ่มกลอสซี่ แบบเว็บ 2.0
จากต่างประเทศมา ไหน ๆ ก็อ่านแล้วชอบแล้ว ก็เลยเอาวิธีทำมาฝากกันครับ
แต่ก่อนอื่นมาดูภาพตัวอย่างกันก่อนครับ

finish1

ขั้นที่ 1 สร้างไฟล์ใหม่ขึ้นมาครับ โดยไปที่เมนู
File > New หรือกด Ctrl + N ที่แป้นพิมพ์ก็ได้ครับ
จากนั้นตั้งค่าตามรูปได้เลย

001


ตั้งค่าแล้ว กด OK ได้เลยครับ



ขั้นที่ 2 เลือกไปที่
เครื่องมือ เส้นประสี่เหลี่ยม
แล้วลากลงไปบนไฟล์งานของเราตามตัวอย่างด้านล่างนี่เลยครับ


002




เมื่อได้สี่เหลี่ยมจัตุรัสสมใจแล้ว
ให้ไปที่เมนู Select > Modify > Smooth
เพื่อลบมุมทั้งสี่ด้านของสี่เหลี่ยมครับ



003




ใส่เลข 5 ลงไป แล้วกด OK




004


ที่จริงขั้นตอนนี้ใส่เลขอะไรก็ได้นะครับ
แล้วแต่ชอบ ตัวเลขยิ่งเยอะ ขอบก็จะยิ่งมนขึ้นครับ


แต่ว่า ตอนทำครั้งแรก
ผมอยากให้ตั้งค่าตามผมก่อน ทุก ๆ ค่าเลยน่ะครับ ^^




ขั้นที่ 3
กดไปที่ปุ่มวงกลมสีแดงตามภาพครับ เพื่อสร้าง Layer 1




005




จากนั้นก็เทสีดำ ลงไปบนเลเยอร์ 1
ได้เลยครับ


006


กด Ctrl + D เพื่อลบซีเล็คชั่นซ๊าา




ขั้นที่ 4 คลิกขวาที่
Layer 1 แล้วเลือก Blending Options… ตามภาพครับ


007




จากนั้นติ๊กถูกที่ Outer Glow ครับ
แล้วตั้งค่าตามภาพได้เลยครับ


008




เสร็จสรรพมาต่อที่ Inner Glow ครับ
เพื่อเพิ่มความฟุ้งภายใน


009


สีฟ้าที่เห็นอยู่ผมใช้รหัส  #1E96D4
ครับ




แล้วก็มาที่ Gradient Overlay ครับ


010


ทางซ้ายมือผมใช้สี รหัส0F6A95


ทางขวามือผมใช้สี รหัส 65BCE1


ป.ล.
การเปลี่ยนสีให้กดไปที่แถบสีได้เลยนะครับ แล้วกดเปลี่ยนสีด้านในได้เลย




สุดท้ายมาที่ Stroke ครับ


011




ตั้งค่าตามที่เห็นในภาพทุกอย่างครับ
ส่วนค่าสีนะครับ ตั้งเป็น 3 สี แล้วตั้งค่า


ซ้ายมือ - ขวามือ ใช้รหัสสี 218BAE


ตรงกลาง ใช้รหัสสี A3D3E9


จากนั้นก็กด OK ได้เลยครับ




012


จะได้ภาพแบบนี้ครับ




ขั้นที่ 5 สร้างเลเยอร์ใหม่ขึ้นมาอีก 1 เลเยอร์ครับ
โดยการกดไปที่ ปุ่ม วงกลมสีแดงที่ 1
จากนั้นเลือกไปที่เครื่องมือเส้นประวงกลม โดยการกดไปที่วงกลมสีแดงที่ 2
ครับ แล้วจึงไปทำซีเล็คชั้น ลักษณะตามภาพครับ ที่ภาพที่เราเพิ่งสร้างขึ้นมา




013


งง มั๊ยครับ ไม่น่าจะงงเนอะ
ลองทำตามดูช้า ๆ นะครับ




แล้วก็เทสีขาวลงไปทับ แบบนี้ครับ


014




ขั้นที่ 6 ไปที่เมนู  Select > Load Selecttion
ครับ




015




จากนั้นกดปุ่ม Shift + Ctrl + I
เพื่ออินเวิร์ส ซีเล็คชั่นครับ




ที่เลเยอร์ 2 ให้ลดค่า Opacity เหลือ
25% หรือตามแต่ที่ชอบครับ


016




จากนั้นกด Ctrl + D ซ๊า
เพื่อลบซีเล็คชั่น แค่นี้ก็จบแล้ว


017


เสร็จแล้วครับ
จากนี้ก็แค่ตกแต่งตามใจชอบครับ ใครชอบแบบไหนก็ลองเอามาแต่งดูครับ




finish2




อย่างภาพสุดท้ายของผม ผมแค่เขียนคำว่า
PSDD.COM ลงไป แล้วเพิ่มเงาสะท้อนเท่านั้น แค่นี้ก็เก๋กู๊ดแล้ว


 Cradit: photoshopdd.com





Create Date : 28 เมษายน 2553
Last Update : 28 เมษายน 2553 1:56:08 น.
Counter : 1295 Pageviews.

0 comment
Glass Toolbar

ถ้าคุณวางแผนที่จะสร้าง หน้าเว็บที่มีลักษณะพิเศษด้วย glass effects, เอฟเฟคที่ดูดีที่สุดก็คือ magnifying glass effect คือมีลักษณะเหมือนแว่นขยายเพราะดูเหมือนชิ้นแก้วใสลอยอยู่เหนือข้อความ  บทความนี้จะนำเสนอการทำปุ่มหรือ tab menu บนเว็บไซด์ ด้วยเอฟเฟคนี้โดยใช้เครื่องมือ  “Filters” และ layer “Blending Options”


1. Create a background to magnify


In order to see the magnification effect, you need a non-uniform
color background. You can use text for this, or pretty any other image,
but I used a pattern filled layer with it’s opacity set to 19%.









background










2. Making some preparations


First, pickup the “Rounded Rectangle Tool” and create a shape with
it, that looks like a toolbar. Transform this path into a selection, cut
the pattern tool with this selection (“Ctrl + X”), then create a new
layer and paste it (“Ctrl + V”) in the new layer. This must look like
the initial image, the pasted pattern must integrate into the background
like it was never taken out from there. Then create a new text layer
and write your toolbar options (a series of “text” word in my example).


preparations









3. Glass distortion


Now choose a “Filter -> Distort -> Spherize” filter, where you
must choose a “Vertical only” distort, with an amount of 100%. Then
apply this filter to both the toolbar layer and the text layer, while
keeping active the selection created from path on step 2.


4. Final effects


Now, for creating the cool looking glass toolbar, you must apply the
following “Blending Options”:



  • Toolbar layer – “Bevel and Emboss” (Style: Outer Bevel, Depth:
    1000%, Size: 10px, Soften: 16px)

  • Text layer – “Drop Shadow” (Distance: 7px)


final


Cradit: designtutorials.info





Create Date : 26 เมษายน 2553
Last Update : 26 เมษายน 2553 23:47:06 น.
Counter : 849 Pageviews.

0 comment
Volume Control Widget

I use widgets a lot. They are very useful, but at the same time is
very hard to find the right design for your theme. I usually search a
lot for one that has both the things I need and colors. Here is how to
design a volume control widget in two classic colors, black and blue.
You can choose other two colors :)


Step 1

Open a new Adobe Photoshop document 200×200 pixel
with white background. Make a new layer and set your foreground to black
and with your Rounded Rectangular Tool draw a rectangular.

Volume Control Widget

Step 2


Open a new layer and with your Elliptical Marquee Tool draw a circle
in the upper part of the rectangular. Fill it up with white and set the
opacity to 46%.


Volume Control Widget


Step 3


Open a new layer set the foreground color to #397fff and the Rounded
Rectangular Radius to 5 px. Now draw a rectangular in the middle of the
first one.


Volume Control Widget


Make a new layer, select your Line Tool (U) and start cutting the
blue rectangular. Make sure the sections have the same size.


Volume Control Widget











Step 4


Now add some shadow to the first rectangular.


Volume Control Widget


The result should be this.


Volume Control Widget







Create Date : 26 เมษายน 2553
Last Update : 26 เมษายน 2553 14:37:13 น.
Counter : 479 Pageviews.

0 comment
1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  

Valentine's Month



ชีวานรินทร์
Location :
  

[ดู Profile ทั้งหมด]
ให้ทิปเจ้าของ Blog [?]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 3 คน [?]