- ข้อความ
- ประวัติศาสตร์
Creating a Header GraphicThe first
Creating a Header Graphic
The first part of designing a website in Photoshop is creating a header graphic for your site. The header graphic is the main graphical part of your site that will be seen first and will be the center for the overall look and feel of your site. Get the finished header graphic here.
Steps to Follow:
1. Right click here to save the image. Save the image in a new folder.
2. Open the downloaded file in Photoshop.
3. Crop the image to 745 x 320 with the COW logo in the right side of the image. To do this select the Rectangular Marquee Tool (M), then under the Style dropdown choose Fixed Size. Put in 745 px for the width and 320 px for the height. Position your marquee to create your header and crop the image (Image menu > Crop).
Marquee Tool Photoshop Header Design 1
4. Create a small 10 pixel feather at the top of the image. Select the Gradient Tool (G), click on the gradient in the top gradient tool window, set the start and end colors to white, set the start opacity to 0% and the ending opacity to 100%. Make a new layer and drag and create the ramp at the top holding shift to make the ramp straight.
Gradient Tool
5. Lighten the graphic by creating another ramp over the while image starting at the bottom and lightening towards the top (hold shift to keep the ramp straight). The end point of the ramp should be about 300 pixels above the image to give a nice haze to the graphic. This gives the appearance of a brighter day in the COW farm.
Photoshop Header Design Graphic
6. Finally we're going to lighten the header graphic even further by creating another vertical ramp in the opposite direction as the previous one. The start point should be even with the top of the COW logo and the bottom should be 1 pixel above the bottom of the graphic.
Photoshop Header Design Graphic 3
7. Save the header graphic into a folder where you are going to create your website using Save for web (Alt+Shift+Ctrl+S). Save as a JPG, optimized, at about 70 quality.
Your header graphic has now been created. The graphic can be used in different ways in a site template. Use it at it's full scale and wrap the navigation and body text around it, or reduced in size and set it into a more modern design template layout.
Designing a Website Layout in Photoshop
The design of your web site should have at least three distinct parts that include specific elements:
1. Header
Company logo
Graphic banner
Links / buttons for the home, about, and contact page
2. Body
Content area for text on the page
Pictures or graphics incorporated with the content
3. Footer
Copyright Information
Links to policy / terms of use, and back to top link
When creating the layout design in Photoshop be sure to leave room for additional navigation, text, and site expansion in the future or you might find yourself needing to completely redesign your site because you didn't leave room for links to more pages in your design. The following steps are used to create the layout for the Photoshop web site layout that can be download here.
Steps to Follow:
1. Create a new PSD file 745 px x 600 px and save it as layout.psd
2. Place the header graphic into the document. (Open the header file (g_header.jpg), select it (ctrl+a), copy (ctrl+c), activate the layout.psd window, paste (ctrl+v).)
3. Use the Move Tool (V) to move the header to the top of the layout holding shift to let it snap into place at the top.
4. Open the Company Logo, copy and paste it into your layout.
5. Transform the logo (ctrl+t) and move it into the top left corner of the site layout.
6. Using the Horizontal Type Tool (T) Photoshop Type Tool create some small text links in the sky between the two logos on top of the guide. Type the word "Home", 4 spaces, "Contact", another 4 spaces, and then "About". Text should be about 12 pt, Arial font, using the color #A6FF94 for a fun light green color.
7. Give the text a dropshadow (Layer > Layer Style > Dropshadow) with a distance of 2 and a size of 3
8. Position the text using the move tool and the arrow keys appropriately next to the top left logo.
9. Below the smaller COW logo we'll create some larger navigation / image links:
Photoshop Header Graphic
Using the Horizontal Type Tool (T) type "HOME PAGE 1 PAGE 2 PAGE 3 PAGE 4" using Arial, 17 pt font with black text. Put about 4 or 5 spaces between the words to give the buttons some space.
Create a new layer New Layer Button and drag it below the text you just created
With the Rectangular Marquee Tool (M) select an area just around the larger navigation.
Select the Paint Bucket Tool (G) and fill the selected area of the new empty layer with (#A6FF94) the green color.
Make this layer look like a button by going to the Layer menu > Layer Style > Bevel and Emboss. Use the default settings by pressing OK
Using your Single Column Marquee Tool delete a column of pixels between each word in the solid green background layer you just created. This will break up the bevel and make each word look like a separate button. You may need to zoom in to get right in between the words.
8. Duplicate the green button layer by dragging it onto the new layer button New Layer Button or go to the Layer menu > Duplicate Layer.
9. Select the bottom green button layer and add a motion blur to the layer with a distance of about 150 pixels by going to the Filter Menu > Blur > Motion Blur.
10. Move the blurred layer down about 10 pixels and lower the opacity to 20%. This gives a subtle line under your buttons to help divide the top from the content.
11. At the bottom of the layout create text that says ©Copyright CreativeCow.net 2008.
12. Create a new layer behind the Copyright text that will become the background behind the footer text, make sure the layer is selected.
13. Use the Rectangular Marquee Tool (M) to select an area across the bottom of the page but just a little higher than the copyright text.
14. Use the Paint Bucket Tool (G) and fill the area with the bright green (#A6FF94).
15. Feather the outside edge by using the Inner glow layer style (Layer menu > Layer Style > Inner Glow) Set the blend mode to Normal, color to white (#ffffff) and the size to 10 pixels.
Photoshop Designed
We've now designed a simple, fun, website in Photoshop with a header and footer. The white space in between the header and the footer will be all the textual content and pictures that will fill in the actual web site.
Slicing Images in Photoshop for the Web
Slice ToolNow that we've designed a simple website with Photoshop we will slice it into pieces and export the pieces as an HTML file that can be later used and modified in Dreamweaver. When slicing your website design remember that each slice will become a separate cell of a table and image so try to keep the slices as few and as simple as possible. Make sure and start and end your slices outside of the design whenever possible so Photoshop doesn't mistake a single pixel you might have missed as a slice. Open the website design we made earlier, select the Slice Tool (K) and let's get started. (Turn on snapping for better results - View menu > Snap (Ctrl+Shift+;), make sure Snap to Layers is turned on.) Download the sliced PSD file here.
Steps to Follow:
1.Create one slice around the entire graphic. Start outside the graphic and end outside the graphic. This will help tell Photoshop to not create single pixel graphics somewhere that we don't want.
2.Slice the footer graphic starting and ending in the gray outside the layout. Let the snapping find the top of the layer for you.
3.Slice the header all the way across the top starting above the graphic in the gray and ending just below the larger navigation. This should slice the COW in two ( oh no! ). You should now have 3 slices for your header portion, your content, and your footer.
4.Slice out all the buttons, try to make sure you are snapping to the same position for each button so that the height of the buttons are the same. For the lower, larger buttons you can snap to the bottom of the surrounding slice.
Sliced Web Page in Photoshop
Your Photoshop web design should be sliced now and ready to save for the web.
Exporting / Saving Photoshop Slices as a Web Page
In earlier versions of Photoshop saving a sliced image for the web could only be done with ImageReady but now it's all built into Adobe Photoshop CS3. The following portion of the tutorial will show you how to save the sliced website design we made in Photoshop as an HTML file with associated images.
Steps to Follow:
1.With your sliced graphic open choose File menu > Save for Web & Devices (Alt+Shift+Ctrl+S). This brings up the Save For Web & Devices window.
2.Under the preset dropdown choose JPEG High for the quality and file type. (This is simply a preference.)
Save for Web And Devices
3.Click the Optimized Menu arrow to open up the sub menu and click on Edit Output Settings...
Output HTML Settings
4.We won't go into detail on the output settings here. Choose Default Settings from the Settings dropdown. Use Prev and Next to look at all the settings.
5.Click OK and then Save. Make sure you are saving in a location you can locate easily.
6.Choose Save as type: HTML and Images (*.html)
7.Settings: Default Settings
8.Slices: All Slices
Save as HTML and Images
9.Click Save
Congratulations you've now successfully designed a website with Photoshop, sliced it, and then successfully exported it as an HTML file! There are some simple modifications that need to be done however before the design can be fully used as a web page or website template but I'll leave that for another tutorial.
The first part of designing a website in Photoshop is creating a header graphic for your site. The header graphic is the main graphical part of your site that will be seen first and will be the center for the overall look and feel of your site. Get the finished header graphic here.
Steps to Follow:
1. Right click here to save the image. Save the image in a new folder.
2. Open the downloaded file in Photoshop.
3. Crop the image to 745 x 320 with the COW logo in the right side of the image. To do this select the Rectangular Marquee Tool (M), then under the Style dropdown choose Fixed Size. Put in 745 px for the width and 320 px for the height. Position your marquee to create your header and crop the image (Image menu > Crop).
Marquee Tool Photoshop Header Design 1
4. Create a small 10 pixel feather at the top of the image. Select the Gradient Tool (G), click on the gradient in the top gradient tool window, set the start and end colors to white, set the start opacity to 0% and the ending opacity to 100%. Make a new layer and drag and create the ramp at the top holding shift to make the ramp straight.
Gradient Tool
5. Lighten the graphic by creating another ramp over the while image starting at the bottom and lightening towards the top (hold shift to keep the ramp straight). The end point of the ramp should be about 300 pixels above the image to give a nice haze to the graphic. This gives the appearance of a brighter day in the COW farm.
Photoshop Header Design Graphic
6. Finally we're going to lighten the header graphic even further by creating another vertical ramp in the opposite direction as the previous one. The start point should be even with the top of the COW logo and the bottom should be 1 pixel above the bottom of the graphic.
Photoshop Header Design Graphic 3
7. Save the header graphic into a folder where you are going to create your website using Save for web (Alt+Shift+Ctrl+S). Save as a JPG, optimized, at about 70 quality.
Your header graphic has now been created. The graphic can be used in different ways in a site template. Use it at it's full scale and wrap the navigation and body text around it, or reduced in size and set it into a more modern design template layout.
Designing a Website Layout in Photoshop
The design of your web site should have at least three distinct parts that include specific elements:
1. Header
Company logo
Graphic banner
Links / buttons for the home, about, and contact page
2. Body
Content area for text on the page
Pictures or graphics incorporated with the content
3. Footer
Copyright Information
Links to policy / terms of use, and back to top link
When creating the layout design in Photoshop be sure to leave room for additional navigation, text, and site expansion in the future or you might find yourself needing to completely redesign your site because you didn't leave room for links to more pages in your design. The following steps are used to create the layout for the Photoshop web site layout that can be download here.
Steps to Follow:
1. Create a new PSD file 745 px x 600 px and save it as layout.psd
2. Place the header graphic into the document. (Open the header file (g_header.jpg), select it (ctrl+a), copy (ctrl+c), activate the layout.psd window, paste (ctrl+v).)
3. Use the Move Tool (V) to move the header to the top of the layout holding shift to let it snap into place at the top.
4. Open the Company Logo, copy and paste it into your layout.
5. Transform the logo (ctrl+t) and move it into the top left corner of the site layout.
6. Using the Horizontal Type Tool (T) Photoshop Type Tool create some small text links in the sky between the two logos on top of the guide. Type the word "Home", 4 spaces, "Contact", another 4 spaces, and then "About". Text should be about 12 pt, Arial font, using the color #A6FF94 for a fun light green color.
7. Give the text a dropshadow (Layer > Layer Style > Dropshadow) with a distance of 2 and a size of 3
8. Position the text using the move tool and the arrow keys appropriately next to the top left logo.
9. Below the smaller COW logo we'll create some larger navigation / image links:
Photoshop Header Graphic
Using the Horizontal Type Tool (T) type "HOME PAGE 1 PAGE 2 PAGE 3 PAGE 4" using Arial, 17 pt font with black text. Put about 4 or 5 spaces between the words to give the buttons some space.
Create a new layer New Layer Button and drag it below the text you just created
With the Rectangular Marquee Tool (M) select an area just around the larger navigation.
Select the Paint Bucket Tool (G) and fill the selected area of the new empty layer with (#A6FF94) the green color.
Make this layer look like a button by going to the Layer menu > Layer Style > Bevel and Emboss. Use the default settings by pressing OK
Using your Single Column Marquee Tool delete a column of pixels between each word in the solid green background layer you just created. This will break up the bevel and make each word look like a separate button. You may need to zoom in to get right in between the words.
8. Duplicate the green button layer by dragging it onto the new layer button New Layer Button or go to the Layer menu > Duplicate Layer.
9. Select the bottom green button layer and add a motion blur to the layer with a distance of about 150 pixels by going to the Filter Menu > Blur > Motion Blur.
10. Move the blurred layer down about 10 pixels and lower the opacity to 20%. This gives a subtle line under your buttons to help divide the top from the content.
11. At the bottom of the layout create text that says ©Copyright CreativeCow.net 2008.
12. Create a new layer behind the Copyright text that will become the background behind the footer text, make sure the layer is selected.
13. Use the Rectangular Marquee Tool (M) to select an area across the bottom of the page but just a little higher than the copyright text.
14. Use the Paint Bucket Tool (G) and fill the area with the bright green (#A6FF94).
15. Feather the outside edge by using the Inner glow layer style (Layer menu > Layer Style > Inner Glow) Set the blend mode to Normal, color to white (#ffffff) and the size to 10 pixels.
Photoshop Designed
We've now designed a simple, fun, website in Photoshop with a header and footer. The white space in between the header and the footer will be all the textual content and pictures that will fill in the actual web site.
Slicing Images in Photoshop for the Web
Slice ToolNow that we've designed a simple website with Photoshop we will slice it into pieces and export the pieces as an HTML file that can be later used and modified in Dreamweaver. When slicing your website design remember that each slice will become a separate cell of a table and image so try to keep the slices as few and as simple as possible. Make sure and start and end your slices outside of the design whenever possible so Photoshop doesn't mistake a single pixel you might have missed as a slice. Open the website design we made earlier, select the Slice Tool (K) and let's get started. (Turn on snapping for better results - View menu > Snap (Ctrl+Shift+;), make sure Snap to Layers is turned on.) Download the sliced PSD file here.
Steps to Follow:
1.Create one slice around the entire graphic. Start outside the graphic and end outside the graphic. This will help tell Photoshop to not create single pixel graphics somewhere that we don't want.
2.Slice the footer graphic starting and ending in the gray outside the layout. Let the snapping find the top of the layer for you.
3.Slice the header all the way across the top starting above the graphic in the gray and ending just below the larger navigation. This should slice the COW in two ( oh no! ). You should now have 3 slices for your header portion, your content, and your footer.
4.Slice out all the buttons, try to make sure you are snapping to the same position for each button so that the height of the buttons are the same. For the lower, larger buttons you can snap to the bottom of the surrounding slice.
Sliced Web Page in Photoshop
Your Photoshop web design should be sliced now and ready to save for the web.
Exporting / Saving Photoshop Slices as a Web Page
In earlier versions of Photoshop saving a sliced image for the web could only be done with ImageReady but now it's all built into Adobe Photoshop CS3. The following portion of the tutorial will show you how to save the sliced website design we made in Photoshop as an HTML file with associated images.
Steps to Follow:
1.With your sliced graphic open choose File menu > Save for Web & Devices (Alt+Shift+Ctrl+S). This brings up the Save For Web & Devices window.
2.Under the preset dropdown choose JPEG High for the quality and file type. (This is simply a preference.)
Save for Web And Devices
3.Click the Optimized Menu arrow to open up the sub menu and click on Edit Output Settings...
Output HTML Settings
4.We won't go into detail on the output settings here. Choose Default Settings from the Settings dropdown. Use Prev and Next to look at all the settings.
5.Click OK and then Save. Make sure you are saving in a location you can locate easily.
6.Choose Save as type: HTML and Images (*.html)
7.Settings: Default Settings
8.Slices: All Slices
Save as HTML and Images
9.Click Save
Congratulations you've now successfully designed a website with Photoshop, sliced it, and then successfully exported it as an HTML file! There are some simple modifications that need to be done however before the design can be fully used as a web page or website template but I'll leave that for another tutorial.
0/5000
สร้างกราฟิกหัวข้อส่วนแรกของการออกแบบเว็บไซต์ใน Photoshop จะสร้างกราฟิกหัวข้อสำหรับไซต์ของคุณ หัวข้อกราฟิกกราฟิกส่วนหลักของไซต์ของคุณที่จะเห็นก่อน และจะเป็นศูนย์รูปลักษณ์โดยรวมของเว็บไซต์ของคุณ ได้ กราฟิกสำเร็จรูปหัวข้อนี่ได้ ขั้นตอนต่อไปนี้: 1. คลิกขวาที่นี่เพื่อบันทึกภาพ บันทึกภาพในโฟลเดอร์ใหม่ 2. เปิดไฟล์ที่ดาวน์โหลดใน Photoshop 3. ครอบตัดรูปภาพ 745 x 320 มีโลโก้วัวในด้านขวาของภาพ ทำ นี้ได้เลือกเครื่องมือวิ่งสี่เหลี่ยม (M), นั้นภายใต้ลักษณะการ หล่นลงเลือกขนาดถาวร ใส่ใน 745 px กว้างและ 320 px สำหรับความสูง ตำแหน่งอักษรวิ่งเพื่อสร้างส่วนหัวของคุณ และครอบตัดรูปภาพ (รูปภาพเมนู > พืช) วิ่งเครื่องมือ Photoshop หัวออก 1 4. สร้างขน 10 พิกเซลขนาดเล็กที่ด้านบนของภาพ เลือกการไล่ระดับสีเครื่องมือ (G), คลิ๊กไล่ระดับสีในหน้าต่างเครื่องมือไล่ระดับสีสูงสุด ตั้งค่าสีเริ่มต้นและสิ้นสุดขาว ตั้งค่าความทึบเริ่มทึบสิ้นสุดถึง 100% และ 0% สร้างเลเยอร์ใหม่ และลาก และสร้างทางลาดด้านบนกด shift เพื่อทำทางลาดตรง เครื่องมือไล่ระดับสี 5. เบากราฟิก โดยการสร้างทางลาดที่อื่นมากกว่าในขณะภาพเริ่มต้นที่ด้านล่าง และเด้งไปด้านบน (ค้าง shift เพื่อให้ทางลาดตรง) จุดสิ้นสุดของทางลาดควรประมาณ 300 พิกเซลด้านบนภาพเพื่อทำให้เมฆหมอกดีกราฟิก ซึ่งทำให้ลักษณะที่ปรากฏของวันสว่างในฟาร์มวัว หัวข้อ Photoshop ออกแบบกราฟิก 6. สุดท้าย เรากำลังจะไปเบาหัวข้อกราฟิกยิ่ง โดยการสร้างทางลาดแนวอื่นในทิศทางตรงกันข้ามเป็นนี้ จุดเริ่มต้นควรจะเป็นแม้จะ มีด้านบนของโลโก้วัว และด้านล่างควร 1 พิกเซลด้านบนด้านล่างของภาพ หัวข้อ Photoshop ออกแบบกราฟิก 3 7. บันทึกหัวข้อรูปภาพลงในโฟลเดอร์ที่คุณกำลังจะสร้างเว็บไซต์ของคุณใช้บันทึกสำหรับเว็บ (Alt + Shift + Ctrl + S) บันทึกเป็น JPG แบบ เพิ่มประสิทธิภาพ คุณภาพประมาณ 70สร้างกราฟิกของหัวข้อนี้ สามารถใช้กราฟิกในลักษณะต่าง ๆ ในแม่แบบไซต์ ในเรื่องขนาดเต็ม และตัดนำและเนื้อความรอบ ๆ หรือขนาดลดลง และตั้งค่าเป็นเค้าโครงแม่แบบการออกแบบสมัยใหม่ ออกแบบรูปแบบเว็บไซต์ใน Photoshopการออกแบบเว็บไซต์ของคุณควรมีน้อยสามส่วนแตกต่างที่มีองค์ประกอบเฉพาะ: 1. หัวข้อโลโก้บริษัทรูปภาพแบนเนอร์เชื่อมโยง / ปุ่มสำหรับหน้า บ้าน เกี่ยวกับ และติดต่อ2. ร่างกายพื้นที่เนื้อหาข้อความบนหน้ารูปภาพหรือกราฟิกรวมกับเนื้อหา3. ส่วนท้ายข้อมูลลิขสิทธิ์เชื่อมโยงกับนโยบาย / เงื่อนไข การใช้งาน และกลับ ไปด้านบนการเชื่อมโยงเมื่อสร้างการออกแบบเค้าโครงใน Photoshop จะไปห้องนำทางเพิ่มเติม ข้อ ความ และเว็บไซต์ขยายในอนาคต หรือคุณอาจพบว่าตัวเองต้องการออกแบบไซต์ของคุณอย่างสมบูรณ์เนื่องจากคุณไม่ออกจากห้องสำหรับการเชื่อมโยงหน้าเพิ่มเติมในการออกแบบ ขั้นตอนต่อไปนี้จะใช้ในการสร้างเค้าโครงของโครงร่างของเว็บไซต์ Photoshop ที่สามารถดาวน์โหลดได้ที่นี่ขั้นตอนต่อไปนี้: 1. สร้างไฟล์ PSD ใหม่ 745 px x 600 px และบันทึกเป็น layout.psd 2. หัวข้อรูปภาพลงในเอกสาร (เปิดแฟ้มหัว (g_header.jpg) เลือก (ctrl + ตัว), คัดลอก (ctrl + c), เปิดใช้งานหน้าต่าง layout.psd วาง (ctrl + v) .) 3. การย้ายเครื่องมือ (V) การย้ายหัวข้อไปยังด้านบนของโครงร่างค้างไว้กะให้มันชิดเข้าที่ด้านบน4. เปิดโลโก้บริษัท คัดลอก และวางเค้าโครงของคุณ 5. เปลี่ยนโลโก้ (ctrl + t) และย้ายไปยังมุมซ้ายบนของโครงร่างของเว็บไซต์ 6. ใช้เครื่องมือชนิด Photoshop แนวนอนชนิดของเครื่องมือ (T) สร้างบางลิงค์ข้อความขนาดเล็กในท้องฟ้าระหว่างโลโก้สองด้านบนของรายการแนะนำ พิมพ์คำ "บ้าน" พื้นที่ 4 "ติดต่อ" ช่อง 4 อีก แล้ว "" ข้อความควรจะประมาณ 12 pt แบบอักษร Arial ใช้สี #A6FF94 สนุกกับแสงสีเขียว 7. ให้ข้อความ dropshadow (ชั้น > แบบชั้น > Dropshadow) กับระยะที่ 2 และ 3 ขนาด8. ตำแหน่งข้อความโดยใช้เครื่องมือย้ายและศรติดโลโก้ซ้ายสุดอย่างเหมาะสม 9. ด้านล่างโลโก้วัวขนาดเล็ก เราจะสร้างการนำทางบางใหญ่ / ภาพเชื่อมโยง: กราฟิก Photoshop หัวข้อ ใช้เครื่องมือชนิดแนวนอน (T) ชนิด "หน้า 1 หน้า 2 หน้า 3 หน้า 4" ใช้ Arial, 17 pt อักษร ด้วยข้อความสีดำ ใส่เกี่ยวกับ 4 หรือ 5 ช่องว่างระหว่างคำให้ปุ่มบางพื้นที่สร้างเลเยอร์ใหม่ปุ่มเลเยอร์ใหม่ แล้วลากข้อความที่คุณเพิ่งสร้างมีแบบสี่เหลี่ยมวิ่งมือ (M) เลือกพื้นที่แค่นำใหญ่เลือกเครื่องมือถังสี (G) และเติมพื้นที่ที่เลือกของชั้นที่ว่างเปล่าใหม่ (#A6FF94) สีเขียวทำให้ชั้นนี้เหมือนปุ่ม โดยไปที่เมนู Layer > ลักษณะชั้น > Emboss และเอียง ใช้การตั้งค่าเริ่มต้น โดยการกด OKโดยใช้การลบเครื่องมือวิ่งคอลัมน์เดียวคอลัมน์ของพิกเซลระหว่างแต่ละคำในชั้นพื้นหลังสีเขียวทึบที่คุณเพิ่งสร้าง นี้จะสลายตัวเอียง และทำให้แต่ละคำเหมือนปุ่มต่างหาก คุณอาจจำเป็นต้องขยายไปขวาระหว่างคำ8. ซ้ำชั้นปุ่มสีเขียว โดยลากไปไว้ในเลเยอร์ใหม่ปุ่มปุ่ม Layer ใหม่ หรือไปที่เมนู Layer > ซ้ำชั้น9. เลือกชั้นปุ่มสีเขียวด้านล่าง และเพิ่มการเคลื่อนไหวเบลอชั้นมีระยะทางประมาณ 150 พิกเซล โดยไปที่เมนูตัวกรอง > เบลอ > เคลื่อนไหวเบลอ 10. ย้ายชั้นมัวลงพิกเซลประมาณ 10 และลดความทึบ 20% ซึ่งทำให้บรรทัดภายใต้ปุ่มของคุณเพื่อช่วยให้แบ่งด้านบนจากเนื้อหารายละเอียด11. ที่ด้านล่างของโครงร่างการสร้างข้อความว่า©สงวนลิขสิทธิ์ CreativeCow.net 2008 12. สร้างเลเยอร์ใหม่อยู่เบื้องหลังข้อความลิขสิทธิ์ที่จะกลายเป็น พื้นหลังข้อความส่วนท้าย ให้แน่ใจว่า เลือกชั้น13. ใช้เครื่องมือวิ่งสี่เหลี่ยม (M) เพื่อเลือกพื้นที่ด้านล่าง ของหน้า แต่เพียงเล็กน้อยสูงกว่าข้อความลิขสิทธิ์ 14. ใช้เครื่องมือถังสี (G) และเติมพื้นที่สีเขียวสดใส (#A6FF94) 15. นกขอบด้านนอกโดยภายในการเรืองแสงแบบชั้น (เมนู Layer > ลักษณะชั้น > เรืองแสงภายใน) ตั้งโหมดผสมปกติ สีขาว (#ffffff) และขนาดการพิกเซล 10 Photoshop ออกแบบตอนนี้เราได้ออกแบบง่าย สนุก เว็บไซต์ใน Photoshop กับหัวกระดาษและท้ายกระดาษ ช่องว่างสีขาวระหว่างส่วนหัวและส่วนท้ายจะมีเนื้อหาข้อความและรูปภาพที่จะกรอกข้อมูลในเว็บไซต์จริงทั้งหมด แบ่งภาพใน Photoshop ในเว็บToolNow ชิ้นที่เราได้ออกแบบเว็บไซต์อย่างง่าย ด้วย Photoshop เราจะหั่นเป็นชิ้น และชิ้นส่วนส่งออกเป็นแฟ้ม HTML ที่สามารถต่อไปใช้ และปรับเปลี่ยนใน Dreamweaver เมื่อแบ่งการออกแบบเว็บไซต์จำไว้ว่า แต่ละชิ้นจะ แยกเซลล์ตาราง และรูปภาพดังนั้นพยายามให้ชิ้นน้อย และ เป็นการง่ายที่เป็นไป แน่ และเริ่มต้น และสิ้นสุดของชิ้นนอกแบบเมื่อใดก็ ตามที่เป็นไปได้เพื่อ Photoshop ไม่ผิดพลาดคุณอาจมีพลาดเป็นเสี้ยวหนึ่งพิกเซลเดียว เปิดการออกแบบเว็บไซต์ที่เราทำก่อน เลือกชิ้นเครื่องมือ (K) และได้ (เปิดจัดระยะเพื่อผลลัพธ์ที่ดี - เมนูมุมมอง > Snap (Ctrl + Shift +;) ให้แน่ใจว่า Snap จะชั้นจะเปิด) ดาวน์โหลดไฟล์ PSD หั่นบาง ๆ นี่ ขั้นตอนต่อไปนี้:1.สร้างชิ้นหนึ่งรอบรูปภาพทั้งหมด เริ่มนอกกราฟิก และจบนอกกราฟิก นี้จะช่วยบอก Photoshop สร้างพิกเซลเดียวกราฟิกบางที่เราไม่ต้องการ2.หั่นท้ายกราฟิกเริ่มต้น และสิ้นสุดในเทานอกแบบ ให้ค้นหา snapping ด้านบนของชั้นสำหรับคุณ3.หั่นหัวทางเหนือเริ่มต้นด้านบนกราฟิกในตัวสีเทา และสิ้นสุดด้านล่างนำใหญ่ นี้ควรหั่นวัว 2 (โอ้ ไม่!) ขณะนี้คุณควรมี 3 ชิ้นส่วนของหัวข้อ เนื้อหา และส่วนท้ายของคุณ4.หั่นออกปุ่มทั้งหมด ลองให้แน่ใจว่า คุณจะถ่ายไปยังตำแหน่งเดียวกันสำหรับแต่ละปุ่มเพื่อให้ความสูงของปุ่มเดียวกัน สำหรับปุ่มล่าง ขนาดใหญ่ คุณสามารถจัดชิดกับด้านล่างของสไลด์โดยรอบหั่นกราฟิกใน Photoshop การออกแบบเว็บ Photoshop ควรหั่นตอนนี้ และพร้อมที่จะบันทึกของเว็บ ส่งออก / บันทึกชิ้น Photoshop เป็นเว็บเพจในเวอร์ชันก่อนหน้าของ Photoshop บันทึกรูปหั่นบาง ๆ สำหรับเว็บเฉพาะทำ ด้วย ImageReady แต่ตอนนี้ มันทั้งหมดอยู่ใน Adobe Photoshop CS3 ส่วนของบทต่อไปนี้จะแสดงวิธีการบันทึกการออกแบบเว็บไซต์หั่นบาง ๆ ที่เราทำใน Photoshop ให้เป็นแฟ้ม HTML ด้วยรูปภาพที่เกี่ยวข้อง ขั้นตอนต่อไปนี้:1. มีการเปิดกราฟิกหั่นบาง ๆ เลือกเมนูแฟ้ม > บันทึกสำหรับเว็บและอุปกรณ์ (Alt + Shift + Ctrl + S) นี้แสดงหน้าต่างบันทึกสำหรับเว็บและอุปกรณ์2.ภายใต้รายการแบบหล่นลงที่กำหนดล่วงหน้าเลือก JPEG สูงสำหรับชนิดคุณภาพและการ (นี้เป็นเพียงความสนใจ)บันทึกสำหรับเว็บและอุปกรณ์ 3.คลิกลูกศรปรับเมนูเพื่อเปิดเมนูย่อย และคลิกแก้ไขการตั้งค่าการแสดงผล...การตั้งค่าการแสดงผล HTML 4.เราจะไม่ไปลงรายละเอียดการตั้งค่าผลผลิตที่นี่ เลือกการตั้งค่าเริ่มต้นจากรายการแบบหล่นลงของการตั้งค่า ใช้ก่อนหน้าและถัดไปเพื่อดูการตั้งค่า5.คลิกตกลง และจากนั้น บันทึก ตรวจสอบให้แน่ใจว่า คุณกำลังบันทึกในตำแหน่งที่คุณสามารถค้นหาได้ง่าย6.เลือกบันทึกเป็นชนิด: HTML และรูปภาพ (* .html)7.Settings: ตั้งค่าเริ่มต้น8.Slices: ทุกชิ้นบันทึกเป็น HTML และรูปภาพ 9.คลิกบันทึกขอแสดงความยินดีคุณได้ตอนนี้เสร็จเรียบร้อยออกแบบเว็บไซต์ ด้วย Photoshop หั่นมัน แล้ว เสร็จเรียบร้อยแล้วส่งออกเป็นแฟ้ม HTML มีการปรับเปลี่ยนบางอย่างที่ต้องทำอย่างไรก็ตามก่อนการออกแบบทั้งหมดใช้เป็นเว็บเพจหรือเว็บไซต์แม่ แต่ฉันจะปล่อยให้ที่สำหรับการกวดวิชาอื่น
การแปล กรุณารอสักครู่..
Creating a Header Graphic
The first part of designing a website in Photoshop is creating a header graphic for your site. The header graphic is the main graphical part of your site that will be seen first and will be the center for the overall look and feel of your site. Get the finished header graphic here.
Steps to Follow:
1. Right click here to save the image. Save the image in a new folder.
2. Open the downloaded file in Photoshop.
3. Crop the image to 745 x 320 with the COW logo in the right side of the image. To do this select the Rectangular Marquee Tool (M), then under the Style dropdown choose Fixed Size. Put in 745 px for the width and 320 px for the height. Position your marquee to create your header and crop the image (Image menu > Crop).
Marquee Tool Photoshop Header Design 1
4. Create a small 10 pixel feather at the top of the image. Select the Gradient Tool (G), click on the gradient in the top gradient tool window, set the start and end colors to white, set the start opacity to 0% and the ending opacity to 100%. Make a new layer and drag and create the ramp at the top holding shift to make the ramp straight.
Gradient Tool
5. Lighten the graphic by creating another ramp over the while image starting at the bottom and lightening towards the top (hold shift to keep the ramp straight). The end point of the ramp should be about 300 pixels above the image to give a nice haze to the graphic. This gives the appearance of a brighter day in the COW farm.
Photoshop Header Design Graphic
6. Finally we're going to lighten the header graphic even further by creating another vertical ramp in the opposite direction as the previous one. The start point should be even with the top of the COW logo and the bottom should be 1 pixel above the bottom of the graphic.
Photoshop Header Design Graphic 3
7. Save the header graphic into a folder where you are going to create your website using Save for web (Alt+Shift+Ctrl+S). Save as a JPG, optimized, at about 70 quality.
Your header graphic has now been created. The graphic can be used in different ways in a site template. Use it at it's full scale and wrap the navigation and body text around it, or reduced in size and set it into a more modern design template layout.
Designing a Website Layout in Photoshop
The design of your web site should have at least three distinct parts that include specific elements:
1. Header
Company logo
Graphic banner
Links / buttons for the home, about, and contact page
2. Body
Content area for text on the page
Pictures or graphics incorporated with the content
3. Footer
Copyright Information
Links to policy / terms of use, and back to top link
When creating the layout design in Photoshop be sure to leave room for additional navigation, text, and site expansion in the future or you might find yourself needing to completely redesign your site because you didn't leave room for links to more pages in your design. The following steps are used to create the layout for the Photoshop web site layout that can be download here.
Steps to Follow:
1. Create a new PSD file 745 px x 600 px and save it as layout.psd
2. Place the header graphic into the document. (Open the header file (g_header.jpg), select it (ctrl+a), copy (ctrl+c), activate the layout.psd window, paste (ctrl+v).)
3. Use the Move Tool (V) to move the header to the top of the layout holding shift to let it snap into place at the top.
4. Open the Company Logo, copy and paste it into your layout.
5. Transform the logo (ctrl+t) and move it into the top left corner of the site layout.
6. Using the Horizontal Type Tool (T) Photoshop Type Tool create some small text links in the sky between the two logos on top of the guide. Type the word "Home", 4 spaces, "Contact", another 4 spaces, and then "About". Text should be about 12 pt, Arial font, using the color #A6FF94 for a fun light green color.
7. Give the text a dropshadow (Layer > Layer Style > Dropshadow) with a distance of 2 and a size of 3
8. Position the text using the move tool and the arrow keys appropriately next to the top left logo.
9. Below the smaller COW logo we'll create some larger navigation / image links:
Photoshop Header Graphic
Using the Horizontal Type Tool (T) type "HOME PAGE 1 PAGE 2 PAGE 3 PAGE 4" using Arial, 17 pt font with black text. Put about 4 or 5 spaces between the words to give the buttons some space.
Create a new layer New Layer Button and drag it below the text you just created
With the Rectangular Marquee Tool (M) select an area just around the larger navigation.
Select the Paint Bucket Tool (G) and fill the selected area of the new empty layer with (#A6FF94) the green color.
Make this layer look like a button by going to the Layer menu > Layer Style > Bevel and Emboss. Use the default settings by pressing OK
Using your Single Column Marquee Tool delete a column of pixels between each word in the solid green background layer you just created. This will break up the bevel and make each word look like a separate button. You may need to zoom in to get right in between the words.
8. Duplicate the green button layer by dragging it onto the new layer button New Layer Button or go to the Layer menu > Duplicate Layer.
9. Select the bottom green button layer and add a motion blur to the layer with a distance of about 150 pixels by going to the Filter Menu > Blur > Motion Blur.
10. Move the blurred layer down about 10 pixels and lower the opacity to 20%. This gives a subtle line under your buttons to help divide the top from the content.
11. At the bottom of the layout create text that says ©Copyright CreativeCow.net 2008.
12. Create a new layer behind the Copyright text that will become the background behind the footer text, make sure the layer is selected.
13. Use the Rectangular Marquee Tool (M) to select an area across the bottom of the page but just a little higher than the copyright text.
14. Use the Paint Bucket Tool (G) and fill the area with the bright green (#A6FF94).
15. Feather the outside edge by using the Inner glow layer style (Layer menu > Layer Style > Inner Glow) Set the blend mode to Normal, color to white (#ffffff) and the size to 10 pixels.
Photoshop Designed
We've now designed a simple, fun, website in Photoshop with a header and footer. The white space in between the header and the footer will be all the textual content and pictures that will fill in the actual web site.
Slicing Images in Photoshop for the Web
Slice ToolNow that we've designed a simple website with Photoshop we will slice it into pieces and export the pieces as an HTML file that can be later used and modified in Dreamweaver. When slicing your website design remember that each slice will become a separate cell of a table and image so try to keep the slices as few and as simple as possible. Make sure and start and end your slices outside of the design whenever possible so Photoshop doesn't mistake a single pixel you might have missed as a slice. Open the website design we made earlier, select the Slice Tool (K) and let's get started. (Turn on snapping for better results - View menu > Snap (Ctrl+Shift+;), make sure Snap to Layers is turned on.) Download the sliced PSD file here.
Steps to Follow:
1.Create one slice around the entire graphic. Start outside the graphic and end outside the graphic. This will help tell Photoshop to not create single pixel graphics somewhere that we don't want.
2.Slice the footer graphic starting and ending in the gray outside the layout. Let the snapping find the top of the layer for you.
3.Slice the header all the way across the top starting above the graphic in the gray and ending just below the larger navigation. This should slice the COW in two ( oh no! ). You should now have 3 slices for your header portion, your content, and your footer.
4.Slice out all the buttons, try to make sure you are snapping to the same position for each button so that the height of the buttons are the same. For the lower, larger buttons you can snap to the bottom of the surrounding slice.
Sliced Web Page in Photoshop
Your Photoshop web design should be sliced now and ready to save for the web.
Exporting / Saving Photoshop Slices as a Web Page
In earlier versions of Photoshop saving a sliced image for the web could only be done with ImageReady but now it's all built into Adobe Photoshop CS3. The following portion of the tutorial will show you how to save the sliced website design we made in Photoshop as an HTML file with associated images.
Steps to Follow:
1.With your sliced graphic open choose File menu > Save for Web & Devices (Alt+Shift+Ctrl+S). This brings up the Save For Web & Devices window.
2.Under the preset dropdown choose JPEG High for the quality and file type. (This is simply a preference.)
Save for Web And Devices
3.Click the Optimized Menu arrow to open up the sub menu and click on Edit Output Settings...
Output HTML Settings
4.We won't go into detail on the output settings here. Choose Default Settings from the Settings dropdown. Use Prev and Next to look at all the settings.
5.Click OK and then Save. Make sure you are saving in a location you can locate easily.
6.Choose Save as type: HTML and Images (*.html)
7.Settings: Default Settings
8.Slices: All Slices
Save as HTML and Images
9.Click Save
Congratulations you've now successfully designed a website with Photoshop, sliced it, and then successfully exported it as an HTML file! There are some simple modifications that need to be done however before the design can be fully used as a web page or website template but I'll leave that for another tutorial.
The first part of designing a website in Photoshop is creating a header graphic for your site. The header graphic is the main graphical part of your site that will be seen first and will be the center for the overall look and feel of your site. Get the finished header graphic here.
Steps to Follow:
1. Right click here to save the image. Save the image in a new folder.
2. Open the downloaded file in Photoshop.
3. Crop the image to 745 x 320 with the COW logo in the right side of the image. To do this select the Rectangular Marquee Tool (M), then under the Style dropdown choose Fixed Size. Put in 745 px for the width and 320 px for the height. Position your marquee to create your header and crop the image (Image menu > Crop).
Marquee Tool Photoshop Header Design 1
4. Create a small 10 pixel feather at the top of the image. Select the Gradient Tool (G), click on the gradient in the top gradient tool window, set the start and end colors to white, set the start opacity to 0% and the ending opacity to 100%. Make a new layer and drag and create the ramp at the top holding shift to make the ramp straight.
Gradient Tool
5. Lighten the graphic by creating another ramp over the while image starting at the bottom and lightening towards the top (hold shift to keep the ramp straight). The end point of the ramp should be about 300 pixels above the image to give a nice haze to the graphic. This gives the appearance of a brighter day in the COW farm.
Photoshop Header Design Graphic
6. Finally we're going to lighten the header graphic even further by creating another vertical ramp in the opposite direction as the previous one. The start point should be even with the top of the COW logo and the bottom should be 1 pixel above the bottom of the graphic.
Photoshop Header Design Graphic 3
7. Save the header graphic into a folder where you are going to create your website using Save for web (Alt+Shift+Ctrl+S). Save as a JPG, optimized, at about 70 quality.
Your header graphic has now been created. The graphic can be used in different ways in a site template. Use it at it's full scale and wrap the navigation and body text around it, or reduced in size and set it into a more modern design template layout.
Designing a Website Layout in Photoshop
The design of your web site should have at least three distinct parts that include specific elements:
1. Header
Company logo
Graphic banner
Links / buttons for the home, about, and contact page
2. Body
Content area for text on the page
Pictures or graphics incorporated with the content
3. Footer
Copyright Information
Links to policy / terms of use, and back to top link
When creating the layout design in Photoshop be sure to leave room for additional navigation, text, and site expansion in the future or you might find yourself needing to completely redesign your site because you didn't leave room for links to more pages in your design. The following steps are used to create the layout for the Photoshop web site layout that can be download here.
Steps to Follow:
1. Create a new PSD file 745 px x 600 px and save it as layout.psd
2. Place the header graphic into the document. (Open the header file (g_header.jpg), select it (ctrl+a), copy (ctrl+c), activate the layout.psd window, paste (ctrl+v).)
3. Use the Move Tool (V) to move the header to the top of the layout holding shift to let it snap into place at the top.
4. Open the Company Logo, copy and paste it into your layout.
5. Transform the logo (ctrl+t) and move it into the top left corner of the site layout.
6. Using the Horizontal Type Tool (T) Photoshop Type Tool create some small text links in the sky between the two logos on top of the guide. Type the word "Home", 4 spaces, "Contact", another 4 spaces, and then "About". Text should be about 12 pt, Arial font, using the color #A6FF94 for a fun light green color.
7. Give the text a dropshadow (Layer > Layer Style > Dropshadow) with a distance of 2 and a size of 3
8. Position the text using the move tool and the arrow keys appropriately next to the top left logo.
9. Below the smaller COW logo we'll create some larger navigation / image links:
Photoshop Header Graphic
Using the Horizontal Type Tool (T) type "HOME PAGE 1 PAGE 2 PAGE 3 PAGE 4" using Arial, 17 pt font with black text. Put about 4 or 5 spaces between the words to give the buttons some space.
Create a new layer New Layer Button and drag it below the text you just created
With the Rectangular Marquee Tool (M) select an area just around the larger navigation.
Select the Paint Bucket Tool (G) and fill the selected area of the new empty layer with (#A6FF94) the green color.
Make this layer look like a button by going to the Layer menu > Layer Style > Bevel and Emboss. Use the default settings by pressing OK
Using your Single Column Marquee Tool delete a column of pixels between each word in the solid green background layer you just created. This will break up the bevel and make each word look like a separate button. You may need to zoom in to get right in between the words.
8. Duplicate the green button layer by dragging it onto the new layer button New Layer Button or go to the Layer menu > Duplicate Layer.
9. Select the bottom green button layer and add a motion blur to the layer with a distance of about 150 pixels by going to the Filter Menu > Blur > Motion Blur.
10. Move the blurred layer down about 10 pixels and lower the opacity to 20%. This gives a subtle line under your buttons to help divide the top from the content.
11. At the bottom of the layout create text that says ©Copyright CreativeCow.net 2008.
12. Create a new layer behind the Copyright text that will become the background behind the footer text, make sure the layer is selected.
13. Use the Rectangular Marquee Tool (M) to select an area across the bottom of the page but just a little higher than the copyright text.
14. Use the Paint Bucket Tool (G) and fill the area with the bright green (#A6FF94).
15. Feather the outside edge by using the Inner glow layer style (Layer menu > Layer Style > Inner Glow) Set the blend mode to Normal, color to white (#ffffff) and the size to 10 pixels.
Photoshop Designed
We've now designed a simple, fun, website in Photoshop with a header and footer. The white space in between the header and the footer will be all the textual content and pictures that will fill in the actual web site.
Slicing Images in Photoshop for the Web
Slice ToolNow that we've designed a simple website with Photoshop we will slice it into pieces and export the pieces as an HTML file that can be later used and modified in Dreamweaver. When slicing your website design remember that each slice will become a separate cell of a table and image so try to keep the slices as few and as simple as possible. Make sure and start and end your slices outside of the design whenever possible so Photoshop doesn't mistake a single pixel you might have missed as a slice. Open the website design we made earlier, select the Slice Tool (K) and let's get started. (Turn on snapping for better results - View menu > Snap (Ctrl+Shift+;), make sure Snap to Layers is turned on.) Download the sliced PSD file here.
Steps to Follow:
1.Create one slice around the entire graphic. Start outside the graphic and end outside the graphic. This will help tell Photoshop to not create single pixel graphics somewhere that we don't want.
2.Slice the footer graphic starting and ending in the gray outside the layout. Let the snapping find the top of the layer for you.
3.Slice the header all the way across the top starting above the graphic in the gray and ending just below the larger navigation. This should slice the COW in two ( oh no! ). You should now have 3 slices for your header portion, your content, and your footer.
4.Slice out all the buttons, try to make sure you are snapping to the same position for each button so that the height of the buttons are the same. For the lower, larger buttons you can snap to the bottom of the surrounding slice.
Sliced Web Page in Photoshop
Your Photoshop web design should be sliced now and ready to save for the web.
Exporting / Saving Photoshop Slices as a Web Page
In earlier versions of Photoshop saving a sliced image for the web could only be done with ImageReady but now it's all built into Adobe Photoshop CS3. The following portion of the tutorial will show you how to save the sliced website design we made in Photoshop as an HTML file with associated images.
Steps to Follow:
1.With your sliced graphic open choose File menu > Save for Web & Devices (Alt+Shift+Ctrl+S). This brings up the Save For Web & Devices window.
2.Under the preset dropdown choose JPEG High for the quality and file type. (This is simply a preference.)
Save for Web And Devices
3.Click the Optimized Menu arrow to open up the sub menu and click on Edit Output Settings...
Output HTML Settings
4.We won't go into detail on the output settings here. Choose Default Settings from the Settings dropdown. Use Prev and Next to look at all the settings.
5.Click OK and then Save. Make sure you are saving in a location you can locate easily.
6.Choose Save as type: HTML and Images (*.html)
7.Settings: Default Settings
8.Slices: All Slices
Save as HTML and Images
9.Click Save
Congratulations you've now successfully designed a website with Photoshop, sliced it, and then successfully exported it as an HTML file! There are some simple modifications that need to be done however before the design can be fully used as a web page or website template but I'll leave that for another tutorial.
การแปล กรุณารอสักครู่..
สร้างส่วนหัวของกราฟิก
ส่วนแรกของการออกแบบเว็บไซต์ใน Photoshop คือการสร้างส่วนหัวของกราฟิกสำหรับเว็บไซต์ของคุณ ส่วนหัวของกราฟิกเป็นส่วนกราฟิกหลักของเว็บไซต์ของคุณที่จะได้เห็นก่อน และจะเป็นศูนย์ รูปลักษณ์โดยรวมและความรู้สึกของเว็บไซต์ของคุณ รับเสร็จส่วนหัวของกราฟิกนี้
ขั้นตอนการติดตาม :
1 คลิกที่นี่เพื่อบันทึกภาพ บันทึกภาพในโฟลเดอร์ใหม่
2 . เปิดแฟ้มที่ดาวน์โหลดใน Photoshop
3 ตัดภาพไปยัง 745 x 320 กับวัวโลโก้ในด้านขวาของภาพ แล้วเลือกเครื่องมือปะรำสี่เหลี่ยม ( M ) แล้ว ตามสไตล์แบบเลื่อนลงเลือกซ่อมขนาด ใส่นี่ไว้สำหรับความกว้างและ 320 พิกเซล สำหรับความสูง ตำแหน่งปะรำเพื่อสร้างส่วนหัวของคุณและตัดภาพ ( Crop เมนู > ภาพ )
ปะรำ Photoshop เครื่องมือการออกแบบส่วนหัว 1
4 สร้างขนาดเล็ก 10 พิกเซลขนนกที่ด้านบนของภาพ เลือกเครื่องมือไล่ระดับสี ( กรัม ) ให้คลิกที่เครื่องมือไล่ระดับสีไล่ระดับสีในด้านบนหน้าต่างการตั้งค่าเริ่มต้นและสิ้นสุดสีขาว , ตั้งค่าความทึบเริ่มต้น 0 % และ สิ้นสุดความทึบแสง 100% สร้างเลเยอร์ใหม่ และลาก และสร้างทางลาดที่ด้านบนถือกะทำทางลาดตรง เครื่องมือไล่ระดับสี
5 . ให้ภาพโดยการสร้างทางลาดมากกว่าภาพอื่นในขณะที่เริ่มต้นที่ด้านล่างและนิ่งไปทางด้านบน ( กด Shift ค้างไว้เพื่อให้ลาดตรง ) จุดสิ้นสุดของทางลาดควรจะประมาณ 300 พิกเซลบนภาพเพื่อให้ควันที่ดีกับกราฟิก นี้จะช่วยให้ลักษณะที่ปรากฏของวันสดใสในฟาร์มวัว . ส่วนหัวของการออกแบบกราฟิก Photoshop
6ในที่สุดเราก็จะให้ส่วนหัวของกราฟิกให้ดียิ่งขึ้นโดยการสร้างทางลาดแนวตั้งอีกในทิศทางตรงกันข้าม เช่นเดิม จุด เริ่มต้นควรคู่กับด้านบนของวัวโลโก้และด้านล่างควรเป็น 1 พิกเซลด้านบนด้านล่างของภาพ
Photoshop ส่วนหัวของการออกแบบกราฟิก 3
7บันทึกส่วนหัวของกราฟิกลงในโฟลเดอร์ที่คุณจะสร้างเว็บไซต์ของคุณโดยใช้การบันทึกสำหรับเว็บ ( Alt Shift ctrl s ) บันทึกเป็น JPG , การเพิ่มประสิทธิภาพ , ที่ประมาณ 70 ภาพ
ส่วนหัวของกราฟิกของคุณได้ถูกสร้างขึ้น กราฟิกที่สามารถใช้ในรูปแบบที่แตกต่างกันในเว็บไซต์แม่แบบ ใช้เป็นขนาดเต็มและตัดระบบนำทางและเนื้อความแถวๆนั้นหรือลดขนาด และตั้งเป็นทันสมัยมากขึ้นการออกแบบแม่แบบเค้าโครง
ออกแบบ เค้าโครงของเว็บไซต์ใน Photoshop
การออกแบบของเว็บไซต์ของคุณควรมีอย่างน้อยสามชิ้นส่วนที่แตกต่างกันซึ่งรวมถึงองค์ประกอบที่เฉพาะเจาะจง :
1 บริษัทโลโก้กราฟิกส่วนหัว
ลิงค์ / แบนเนอร์ ปุ่ม สำหรับบ้าน และหน้าติดต่อ
2 ร่างกาย
เนื้อหาพื้นที่สำหรับข้อความในหน้า
รูปภาพหรือกราฟิกรวมกับเนื้อหา
3
ลิขสิทธิ์ส่วนท้ายข้อมูลการเชื่อมโยงนโยบาย / เงื่อนไขการใช้ และหลัง
ลิงค์ด้านบนเมื่อมีการสร้างรูปแบบการออกแบบใน Photoshop ต้องออกจากห้องเพื่อนำทาง , ข้อความเพิ่มเติมเว็บไซต์และการขยายตัวในอนาคต หรือคุณอาจพบว่าตัวเองต้องการที่จะสมบูรณ์และการออกแบบเว็บไซต์ของคุณเพราะคุณไม่ได้ออกจากห้องเพื่อการเชื่อมโยงไปยังหน้าเว็บมากขึ้นในการออกแบบของคุณ ขั้นตอนต่อไปนี้จะใช้ในการสร้างรูปแบบเว็บสำหรับ Photoshop รูปแบบเว็บไซต์ที่สามารถดาวน์โหลดได้ ที่นี่ .
ขั้นตอนที่จะปฏิบัติตาม :
1 สร้างใหม่ไฟล์ PSD เป็น px x 600 px และบันทึกเป็น layout.psd
2ที่ส่วนหัวของกราฟิกลงในเอกสาร ( เปิดแฟ้มส่วนหัว ( g_header . jpg ) , เลือก ( Ctrl ) , คัดลอก ( Ctrl C ) , เปิดหน้าต่าง layout.psd วาง ( Ctrl V )
3 ใช้เครื่องมือเคลื่อนย้าย ( V ) เพื่อย้ายหัวไปยังด้านบนของรูปแบบถือกะให้มันถ่ายเป็นสถานที่ที่ด้านบน .
4 เปิดโลโก้ บริษัท , คัดลอกและวางลงในเค้าโครงของคุณ
5เปลี่ยนโลโก้ ( Ctrl T ) และย้ายมันเข้าไปในมุมซ้ายบนของเว็บไซต์รูปแบบ
6 การใช้เครื่องมือประเภทแนวนอน ( T ) เครื่องมือประเภท Photoshop สร้างการเชื่อมโยงข้อความขนาดเล็กในท้องฟ้าระหว่างสองโลโก้ด้านบนของคู่มือ พิมพ์คำว่า " บ้าน " , 4 เป็น " ติดต่อ " อีก 4 คัน จากนั้น " เกี่ยวกับ " ข้อความควรจะประมาณ 12 pt , Arial ตัวอักษรการใช้สี# a6ff94 เพื่อความสนุกสีเขียวอ่อนสี
7 ให้ข้อความ dropshadow ( ชั้นสไตล์ชั้น > > dropshadow ) ด้วยระยะทาง 2 ขนาด 3
8 ย้ายตำแหน่งข้อความโดยใช้เครื่องมือและปุ่มลูกศรที่เหมาะสมถัดจากโลโก้ด้านบนซ้าย
9 ด้านล่างมีโลโก้วัวเราอาจสร้างขนาดใหญ่นำร่อง / ภาพการเชื่อมโยง :
Photoshop หัวกราฟิกการใช้เครื่องมือประเภทแนวนอน ( T ) ประเภท " บ้านหน้า 1 หน้า 2 หน้า 3 หน้า 4 " โดยใช้ตัวอักษร Arial 17 PT ด้วยข้อความสีดำ ใส่ประมาณ 4 หรือ 5 ช่องว่างระหว่างคำเพื่อให้ปุ่มบางพื้นที่ สร้างเลเยอร์ใหม่
ชั้นใหม่ ปุ่มและลากด้านล่างข้อความที่คุณเพิ่งสร้างขึ้นด้วยเครื่องมือปะรำสี่เหลี่ยม
( M ) เลือกพื้นที่รอบ
ขนาดใหญ่ทางเลือกเครื่องมือถังสี ( G ) และกรอกข้อมูลในพื้นที่ที่เลือกของเลเยอร์เปล่าใหม่ ( # a6ff94 ) สีเขียว
ทำให้ชั้นเหมือนปุ่มโดยไปที่เมนู Layer > > มุมสไตล์ชั้นและนูน . ใช้การตั้งค่าเริ่มต้นโดยการกดปุ่ม OK
ใช้คอลัมน์เดียว ปะรำเครื่องมือลบคอลัมน์ของพิกเซลระหว่างแต่ละคำในชั้นพื้นหลังสีเขียวทึบที่คุณเพิ่งสร้างขึ้น .นี้จะเลิกเอียง และให้แต่ละคำดูเหมือนปุ่มแยก คุณอาจต้องการที่จะขยายไป อยู่ระหว่างคำ .
8 ซ้ําชั้นปุ่มสีเขียวโดยการลากไปยังปุ่มใหม่ปุ่มชั้นเลเยอร์ใหม่ หรือไปที่เมนู Layer > Layer ซ้ำ .
9เลือกเลเยอร์ด้านล่างปุ่มสีเขียวและเพิ่มการเคลื่อนไหวเบลอกับชั้นด้วยระยะทางประมาณ 150 พิกเซล โดยไปที่เมนูตัวกรอง > Blur > เคลื่อนไหวเบลอ
10 ย้ายเลือนชั้นลงประมาณ 10 พิกเซล และลดความทึบถึง 20 % นี้จะช่วยให้เส้นบางๆ ใต้ปุ่มของคุณเพื่อช่วยแบ่งสูงสุดจากเนื้อหา .
11ที่ด้านล่างของรูปแบบสร้างข้อความที่ระบุว่าสงวนลิขสิทธิ์ลิขสิทธิ์ creativecow.net 2008
12 สร้างเลเยอร์ใหม่หลังข้อความลิขสิทธิ์นั้นจะกลายเป็นพื้นหลังข้อความส่วนท้าย ให้แน่ใจว่าชั้นจะถูกเลือก
13 ใช้เครื่องมือปะรำสี่เหลี่ยม ( M ) ได้เลือกพื้นที่ในด้านล่างของหน้า แต่เพียงเล็กน้อยสูงกว่าข้อความลิขสิทธิ์
14ใช้เครื่องมือถังสี ( G ) และเติมพื้นที่ที่มีสีเขียวสดใส ( # a6ff94 )
15 ขนนกขอบนอกโดยการเรืองแสงภายในชั้นสไตล์ชั้น > > เมนูสไตล์ชั้นด้านในเรืองแสง ) ตั้งโหมดปกติ สีขาว ( # ffffff ) และขนาด 10 พิกเซล
ตอนนี้เราออกแบบ Photoshop ออกแบบที่สนุกง่าย , เว็บไซต์ใน Photoshop กับหัวกระดาษและท้ายกระดาษพื้นที่สีขาวในระหว่างส่วนหัวและส่วนท้ายจะเป็นทั้งหมดที่เนื้อหาต้นฉบับเดิมและภาพที่จะกรอกข้อมูลลงในเว็บไซต์จริง
slicing ภาพใน Photoshop สำหรับเว็บ
ฝาน toolnow ที่เราออกแบบเว็บไซต์ด้วย Photoshop แบบง่าย เราจะหั่นมันเป็นชิ้นและส่งออกชิ้นส่วนที่เป็นไฟล์ HTML ที่สามารถใช้ในภายหลังและแก้ไขใน Dreamweaverเมื่อการออกแบบเว็บไซต์ของคุณจำแต่ละชิ้นจะกลายเป็นแยกเซลล์ของตารางและภาพเพื่อพยายามเก็บชิ้นน้อยและง่ายที่สุด . ตรวจสอบให้แน่ใจและเริ่มต้นและสิ้นสุดของคุณชิ้นนอกออกแบบเมื่อใดก็ตามที่เป็นไปได้ดังนั้น Photoshop ไม่พลาดพิกเซลเดียวคุณอาจจะพลาดเป็นชิ้น เปิดเว็บไซต์ที่เราทำก่อนหน้านี้เลือกเครื่องมือ Slice ( K ) และมาเริ่มกันเถอะ ( เปิด snapping เพื่อผลลัพธ์ - ถ่ายเมนู > วิวดีกว่า ( Ctrl Shift ) ให้แน่ใจว่าถ่ายเลเยอร์จะถูกเปิด . ) ดาวน์โหลดหั่นไฟล์ที่นี่ ขั้นตอนที่จะปฏิบัติตาม :
1.create หนึ่งชิ้นรอบกราฟิกทั้งหมด เริ่มจากข้างนอก จบนอก กราฟิกและภาพนี้จะช่วยบอก Photoshop เพื่อสร้างกราฟิกพิกเซลเดียว บางที่ ที่เราไม่ต้องการ
2.slice ส่วนท้ายของภาพเริ่มต้นและสิ้นสุดในสีเทานอกรูปแบบ ให้ระยะค้นหาด้านบนของชั้นสำหรับคุณ .
3.slice ส่วนหัวทั้งหมดทางด้านบนเริ่มข้างต้นกราฟิกในสีเทาและสิ้นสุดที่ด้านล่างขนาดใหญ่ทาง นี้ควรเชือดวัว 2 ( โอ้ ไม่ !) ขณะนี้คุณควรมี 3 ชิ้นสำหรับส่วน ส่วนหัวของคุณเนื้อหาของคุณและเท้าของคุณ .
4.slice ออกปุ่มทั้งหมดพยายามที่จะให้แน่ใจว่า คุณจะหักตำแหน่งเดียวกันสำหรับแต่ละปุ่มเพื่อให้ความสูงของปุ่มจะเหมือนกัน สำหรับการลดปุ่มขนาดใหญ่คุณสามารถ snap กับด้านล่างของชิ้นรอบ .
หั่นหน้าเว็บใน Photoshop
ออกแบบเว็บไซต์ Photoshop ของคุณควรจะหั่นแล้ว และพร้อมที่จะบันทึกสำหรับเว็บ
ส่งออก / บันทึก Photoshop ชิ้นเป็นเว็บเพจ
ในรุ่นก่อนหน้าของ Photoshop บันทึกแผ่นภาพสำหรับเว็บสามารถทำ imageready แต่ตอนนี้มันถูกสร้างขึ้นทั้งหมดลงในโปรแกรม Adobe Photoshop CS3 .ส่วนต่อไปนี้การกวดวิชาจะแสดงให้คุณเห็นวิธีที่จะบันทึกแผ่นออกแบบเว็บไซต์เราทำใน Photoshop เป็นแฟ้ม HTML ที่มีภาพที่เกี่ยวข้อง ขั้นตอนที่จะปฏิบัติตาม :
1.with ของคุณหั่นกราฟิกเปิดเลือกไฟล์เมนู > บันทึกสำหรับอุปกรณ์&เว็บ ( Alt Shift ctrl s ) นี้จะนำขึ้นบันทึกสำหรับเว็บ&อุปกรณ์หน้าต่าง
2.under แบบเลื่อนลงเลือก JPEG สูงที่ตั้งไว้สำหรับคุณภาพและชนิดของไฟล์( นี้เป็นเพียงความชอบ )
3.click บันทึกสำหรับเว็บและอุปกรณ์เพิ่มประสิทธิภาพเมนูลูกศรเพื่อเปิดเมนูย่อย แล้วคลิก แก้ไขการตั้งค่าการส่งออก . . . . . . .
HTML การตั้งค่า
เราไม่เข้าไปดูรายละเอียดในการแสดงผลการตั้งค่าที่นี่ เลือกการตั้งค่าเริ่มต้นจากกล่องการตั้งค่า ใช้ก่อนหน้าและถัดไปดูที่การตั้งค่าทั้งหมด .
โอเค 5.click แล้วบันทึกให้แน่ใจว่า คุณจะประหยัดในสถานที่ที่คุณสามารถค้นหาได้อย่างง่ายดาย .
6.choose บันทึกเป็นประเภท : HTML และภาพ ( * . html )
7.settings : การตั้งค่าเริ่มต้น
8.slices : ทุกชิ้น
บันทึกเป็น HTML และภาพ
9.click บันทึก
ยินดีด้วยท่านได้ออกแบบเรียบร้อยแล้ว เว็บไซต์ด้วย Photoshop , หั่นบาง ๆ แล้วประสบความสำเร็จในการส่งออกเป็น HTML ไฟล์มีการเปลี่ยนแปลงบางอย่างง่ายที่ต้องทำ อย่างไรก็ตามก่อนที่จะออกแบบได้ใช้เป็นหน้าเว็บหรือเว็บไซต์แม่แบบแต่ผมจะไปให้สอนอีก .
ส่วนแรกของการออกแบบเว็บไซต์ใน Photoshop คือการสร้างส่วนหัวของกราฟิกสำหรับเว็บไซต์ของคุณ ส่วนหัวของกราฟิกเป็นส่วนกราฟิกหลักของเว็บไซต์ของคุณที่จะได้เห็นก่อน และจะเป็นศูนย์ รูปลักษณ์โดยรวมและความรู้สึกของเว็บไซต์ของคุณ รับเสร็จส่วนหัวของกราฟิกนี้
ขั้นตอนการติดตาม :
1 คลิกที่นี่เพื่อบันทึกภาพ บันทึกภาพในโฟลเดอร์ใหม่
2 . เปิดแฟ้มที่ดาวน์โหลดใน Photoshop
3 ตัดภาพไปยัง 745 x 320 กับวัวโลโก้ในด้านขวาของภาพ แล้วเลือกเครื่องมือปะรำสี่เหลี่ยม ( M ) แล้ว ตามสไตล์แบบเลื่อนลงเลือกซ่อมขนาด ใส่นี่ไว้สำหรับความกว้างและ 320 พิกเซล สำหรับความสูง ตำแหน่งปะรำเพื่อสร้างส่วนหัวของคุณและตัดภาพ ( Crop เมนู > ภาพ )
ปะรำ Photoshop เครื่องมือการออกแบบส่วนหัว 1
4 สร้างขนาดเล็ก 10 พิกเซลขนนกที่ด้านบนของภาพ เลือกเครื่องมือไล่ระดับสี ( กรัม ) ให้คลิกที่เครื่องมือไล่ระดับสีไล่ระดับสีในด้านบนหน้าต่างการตั้งค่าเริ่มต้นและสิ้นสุดสีขาว , ตั้งค่าความทึบเริ่มต้น 0 % และ สิ้นสุดความทึบแสง 100% สร้างเลเยอร์ใหม่ และลาก และสร้างทางลาดที่ด้านบนถือกะทำทางลาดตรง เครื่องมือไล่ระดับสี
5 . ให้ภาพโดยการสร้างทางลาดมากกว่าภาพอื่นในขณะที่เริ่มต้นที่ด้านล่างและนิ่งไปทางด้านบน ( กด Shift ค้างไว้เพื่อให้ลาดตรง ) จุดสิ้นสุดของทางลาดควรจะประมาณ 300 พิกเซลบนภาพเพื่อให้ควันที่ดีกับกราฟิก นี้จะช่วยให้ลักษณะที่ปรากฏของวันสดใสในฟาร์มวัว . ส่วนหัวของการออกแบบกราฟิก Photoshop
6ในที่สุดเราก็จะให้ส่วนหัวของกราฟิกให้ดียิ่งขึ้นโดยการสร้างทางลาดแนวตั้งอีกในทิศทางตรงกันข้าม เช่นเดิม จุด เริ่มต้นควรคู่กับด้านบนของวัวโลโก้และด้านล่างควรเป็น 1 พิกเซลด้านบนด้านล่างของภาพ
Photoshop ส่วนหัวของการออกแบบกราฟิก 3
7บันทึกส่วนหัวของกราฟิกลงในโฟลเดอร์ที่คุณจะสร้างเว็บไซต์ของคุณโดยใช้การบันทึกสำหรับเว็บ ( Alt Shift ctrl s ) บันทึกเป็น JPG , การเพิ่มประสิทธิภาพ , ที่ประมาณ 70 ภาพ
ส่วนหัวของกราฟิกของคุณได้ถูกสร้างขึ้น กราฟิกที่สามารถใช้ในรูปแบบที่แตกต่างกันในเว็บไซต์แม่แบบ ใช้เป็นขนาดเต็มและตัดระบบนำทางและเนื้อความแถวๆนั้นหรือลดขนาด และตั้งเป็นทันสมัยมากขึ้นการออกแบบแม่แบบเค้าโครง
ออกแบบ เค้าโครงของเว็บไซต์ใน Photoshop
การออกแบบของเว็บไซต์ของคุณควรมีอย่างน้อยสามชิ้นส่วนที่แตกต่างกันซึ่งรวมถึงองค์ประกอบที่เฉพาะเจาะจง :
1 บริษัทโลโก้กราฟิกส่วนหัว
ลิงค์ / แบนเนอร์ ปุ่ม สำหรับบ้าน และหน้าติดต่อ
2 ร่างกาย
เนื้อหาพื้นที่สำหรับข้อความในหน้า
รูปภาพหรือกราฟิกรวมกับเนื้อหา
3
ลิขสิทธิ์ส่วนท้ายข้อมูลการเชื่อมโยงนโยบาย / เงื่อนไขการใช้ และหลัง
ลิงค์ด้านบนเมื่อมีการสร้างรูปแบบการออกแบบใน Photoshop ต้องออกจากห้องเพื่อนำทาง , ข้อความเพิ่มเติมเว็บไซต์และการขยายตัวในอนาคต หรือคุณอาจพบว่าตัวเองต้องการที่จะสมบูรณ์และการออกแบบเว็บไซต์ของคุณเพราะคุณไม่ได้ออกจากห้องเพื่อการเชื่อมโยงไปยังหน้าเว็บมากขึ้นในการออกแบบของคุณ ขั้นตอนต่อไปนี้จะใช้ในการสร้างรูปแบบเว็บสำหรับ Photoshop รูปแบบเว็บไซต์ที่สามารถดาวน์โหลดได้ ที่นี่ .
ขั้นตอนที่จะปฏิบัติตาม :
1 สร้างใหม่ไฟล์ PSD เป็น px x 600 px และบันทึกเป็น layout.psd
2ที่ส่วนหัวของกราฟิกลงในเอกสาร ( เปิดแฟ้มส่วนหัว ( g_header . jpg ) , เลือก ( Ctrl ) , คัดลอก ( Ctrl C ) , เปิดหน้าต่าง layout.psd วาง ( Ctrl V )
3 ใช้เครื่องมือเคลื่อนย้าย ( V ) เพื่อย้ายหัวไปยังด้านบนของรูปแบบถือกะให้มันถ่ายเป็นสถานที่ที่ด้านบน .
4 เปิดโลโก้ บริษัท , คัดลอกและวางลงในเค้าโครงของคุณ
5เปลี่ยนโลโก้ ( Ctrl T ) และย้ายมันเข้าไปในมุมซ้ายบนของเว็บไซต์รูปแบบ
6 การใช้เครื่องมือประเภทแนวนอน ( T ) เครื่องมือประเภท Photoshop สร้างการเชื่อมโยงข้อความขนาดเล็กในท้องฟ้าระหว่างสองโลโก้ด้านบนของคู่มือ พิมพ์คำว่า " บ้าน " , 4 เป็น " ติดต่อ " อีก 4 คัน จากนั้น " เกี่ยวกับ " ข้อความควรจะประมาณ 12 pt , Arial ตัวอักษรการใช้สี# a6ff94 เพื่อความสนุกสีเขียวอ่อนสี
7 ให้ข้อความ dropshadow ( ชั้นสไตล์ชั้น > > dropshadow ) ด้วยระยะทาง 2 ขนาด 3
8 ย้ายตำแหน่งข้อความโดยใช้เครื่องมือและปุ่มลูกศรที่เหมาะสมถัดจากโลโก้ด้านบนซ้าย
9 ด้านล่างมีโลโก้วัวเราอาจสร้างขนาดใหญ่นำร่อง / ภาพการเชื่อมโยง :
Photoshop หัวกราฟิกการใช้เครื่องมือประเภทแนวนอน ( T ) ประเภท " บ้านหน้า 1 หน้า 2 หน้า 3 หน้า 4 " โดยใช้ตัวอักษร Arial 17 PT ด้วยข้อความสีดำ ใส่ประมาณ 4 หรือ 5 ช่องว่างระหว่างคำเพื่อให้ปุ่มบางพื้นที่ สร้างเลเยอร์ใหม่
ชั้นใหม่ ปุ่มและลากด้านล่างข้อความที่คุณเพิ่งสร้างขึ้นด้วยเครื่องมือปะรำสี่เหลี่ยม
( M ) เลือกพื้นที่รอบ
ขนาดใหญ่ทางเลือกเครื่องมือถังสี ( G ) และกรอกข้อมูลในพื้นที่ที่เลือกของเลเยอร์เปล่าใหม่ ( # a6ff94 ) สีเขียว
ทำให้ชั้นเหมือนปุ่มโดยไปที่เมนู Layer > > มุมสไตล์ชั้นและนูน . ใช้การตั้งค่าเริ่มต้นโดยการกดปุ่ม OK
ใช้คอลัมน์เดียว ปะรำเครื่องมือลบคอลัมน์ของพิกเซลระหว่างแต่ละคำในชั้นพื้นหลังสีเขียวทึบที่คุณเพิ่งสร้างขึ้น .นี้จะเลิกเอียง และให้แต่ละคำดูเหมือนปุ่มแยก คุณอาจต้องการที่จะขยายไป อยู่ระหว่างคำ .
8 ซ้ําชั้นปุ่มสีเขียวโดยการลากไปยังปุ่มใหม่ปุ่มชั้นเลเยอร์ใหม่ หรือไปที่เมนู Layer > Layer ซ้ำ .
9เลือกเลเยอร์ด้านล่างปุ่มสีเขียวและเพิ่มการเคลื่อนไหวเบลอกับชั้นด้วยระยะทางประมาณ 150 พิกเซล โดยไปที่เมนูตัวกรอง > Blur > เคลื่อนไหวเบลอ
10 ย้ายเลือนชั้นลงประมาณ 10 พิกเซล และลดความทึบถึง 20 % นี้จะช่วยให้เส้นบางๆ ใต้ปุ่มของคุณเพื่อช่วยแบ่งสูงสุดจากเนื้อหา .
11ที่ด้านล่างของรูปแบบสร้างข้อความที่ระบุว่าสงวนลิขสิทธิ์ลิขสิทธิ์ creativecow.net 2008
12 สร้างเลเยอร์ใหม่หลังข้อความลิขสิทธิ์นั้นจะกลายเป็นพื้นหลังข้อความส่วนท้าย ให้แน่ใจว่าชั้นจะถูกเลือก
13 ใช้เครื่องมือปะรำสี่เหลี่ยม ( M ) ได้เลือกพื้นที่ในด้านล่างของหน้า แต่เพียงเล็กน้อยสูงกว่าข้อความลิขสิทธิ์
14ใช้เครื่องมือถังสี ( G ) และเติมพื้นที่ที่มีสีเขียวสดใส ( # a6ff94 )
15 ขนนกขอบนอกโดยการเรืองแสงภายในชั้นสไตล์ชั้น > > เมนูสไตล์ชั้นด้านในเรืองแสง ) ตั้งโหมดปกติ สีขาว ( # ffffff ) และขนาด 10 พิกเซล
ตอนนี้เราออกแบบ Photoshop ออกแบบที่สนุกง่าย , เว็บไซต์ใน Photoshop กับหัวกระดาษและท้ายกระดาษพื้นที่สีขาวในระหว่างส่วนหัวและส่วนท้ายจะเป็นทั้งหมดที่เนื้อหาต้นฉบับเดิมและภาพที่จะกรอกข้อมูลลงในเว็บไซต์จริง
slicing ภาพใน Photoshop สำหรับเว็บ
ฝาน toolnow ที่เราออกแบบเว็บไซต์ด้วย Photoshop แบบง่าย เราจะหั่นมันเป็นชิ้นและส่งออกชิ้นส่วนที่เป็นไฟล์ HTML ที่สามารถใช้ในภายหลังและแก้ไขใน Dreamweaverเมื่อการออกแบบเว็บไซต์ของคุณจำแต่ละชิ้นจะกลายเป็นแยกเซลล์ของตารางและภาพเพื่อพยายามเก็บชิ้นน้อยและง่ายที่สุด . ตรวจสอบให้แน่ใจและเริ่มต้นและสิ้นสุดของคุณชิ้นนอกออกแบบเมื่อใดก็ตามที่เป็นไปได้ดังนั้น Photoshop ไม่พลาดพิกเซลเดียวคุณอาจจะพลาดเป็นชิ้น เปิดเว็บไซต์ที่เราทำก่อนหน้านี้เลือกเครื่องมือ Slice ( K ) และมาเริ่มกันเถอะ ( เปิด snapping เพื่อผลลัพธ์ - ถ่ายเมนู > วิวดีกว่า ( Ctrl Shift ) ให้แน่ใจว่าถ่ายเลเยอร์จะถูกเปิด . ) ดาวน์โหลดหั่นไฟล์ที่นี่ ขั้นตอนที่จะปฏิบัติตาม :
1.create หนึ่งชิ้นรอบกราฟิกทั้งหมด เริ่มจากข้างนอก จบนอก กราฟิกและภาพนี้จะช่วยบอก Photoshop เพื่อสร้างกราฟิกพิกเซลเดียว บางที่ ที่เราไม่ต้องการ
2.slice ส่วนท้ายของภาพเริ่มต้นและสิ้นสุดในสีเทานอกรูปแบบ ให้ระยะค้นหาด้านบนของชั้นสำหรับคุณ .
3.slice ส่วนหัวทั้งหมดทางด้านบนเริ่มข้างต้นกราฟิกในสีเทาและสิ้นสุดที่ด้านล่างขนาดใหญ่ทาง นี้ควรเชือดวัว 2 ( โอ้ ไม่ !) ขณะนี้คุณควรมี 3 ชิ้นสำหรับส่วน ส่วนหัวของคุณเนื้อหาของคุณและเท้าของคุณ .
4.slice ออกปุ่มทั้งหมดพยายามที่จะให้แน่ใจว่า คุณจะหักตำแหน่งเดียวกันสำหรับแต่ละปุ่มเพื่อให้ความสูงของปุ่มจะเหมือนกัน สำหรับการลดปุ่มขนาดใหญ่คุณสามารถ snap กับด้านล่างของชิ้นรอบ .
หั่นหน้าเว็บใน Photoshop
ออกแบบเว็บไซต์ Photoshop ของคุณควรจะหั่นแล้ว และพร้อมที่จะบันทึกสำหรับเว็บ
ส่งออก / บันทึก Photoshop ชิ้นเป็นเว็บเพจ
ในรุ่นก่อนหน้าของ Photoshop บันทึกแผ่นภาพสำหรับเว็บสามารถทำ imageready แต่ตอนนี้มันถูกสร้างขึ้นทั้งหมดลงในโปรแกรม Adobe Photoshop CS3 .ส่วนต่อไปนี้การกวดวิชาจะแสดงให้คุณเห็นวิธีที่จะบันทึกแผ่นออกแบบเว็บไซต์เราทำใน Photoshop เป็นแฟ้ม HTML ที่มีภาพที่เกี่ยวข้อง ขั้นตอนที่จะปฏิบัติตาม :
1.with ของคุณหั่นกราฟิกเปิดเลือกไฟล์เมนู > บันทึกสำหรับอุปกรณ์&เว็บ ( Alt Shift ctrl s ) นี้จะนำขึ้นบันทึกสำหรับเว็บ&อุปกรณ์หน้าต่าง
2.under แบบเลื่อนลงเลือก JPEG สูงที่ตั้งไว้สำหรับคุณภาพและชนิดของไฟล์( นี้เป็นเพียงความชอบ )
3.click บันทึกสำหรับเว็บและอุปกรณ์เพิ่มประสิทธิภาพเมนูลูกศรเพื่อเปิดเมนูย่อย แล้วคลิก แก้ไขการตั้งค่าการส่งออก . . . . . . .
HTML การตั้งค่า
เราไม่เข้าไปดูรายละเอียดในการแสดงผลการตั้งค่าที่นี่ เลือกการตั้งค่าเริ่มต้นจากกล่องการตั้งค่า ใช้ก่อนหน้าและถัดไปดูที่การตั้งค่าทั้งหมด .
โอเค 5.click แล้วบันทึกให้แน่ใจว่า คุณจะประหยัดในสถานที่ที่คุณสามารถค้นหาได้อย่างง่ายดาย .
6.choose บันทึกเป็นประเภท : HTML และภาพ ( * . html )
7.settings : การตั้งค่าเริ่มต้น
8.slices : ทุกชิ้น
บันทึกเป็น HTML และภาพ
9.click บันทึก
ยินดีด้วยท่านได้ออกแบบเรียบร้อยแล้ว เว็บไซต์ด้วย Photoshop , หั่นบาง ๆ แล้วประสบความสำเร็จในการส่งออกเป็น HTML ไฟล์มีการเปลี่ยนแปลงบางอย่างง่ายที่ต้องทำ อย่างไรก็ตามก่อนที่จะออกแบบได้ใช้เป็นหน้าเว็บหรือเว็บไซต์แม่แบบแต่ผมจะไปให้สอนอีก .
การแปล กรุณารอสักครู่..
ภาษาอื่น ๆ
การสนับสนุนเครื่องมือแปลภาษา: กรีก, กันนาดา, กาลิเชียน, คลิงออน, คอร์สิกา, คาซัค, คาตาลัน, คินยารวันดา, คีร์กิซ, คุชราต, จอร์เจีย, จีน, จีนดั้งเดิม, ชวา, ชิเชวา, ซามัว, ซีบัวโน, ซุนดา, ซูลู, ญี่ปุ่น, ดัตช์, ตรวจหาภาษา, ตุรกี, ทมิฬ, ทาจิก, ทาทาร์, นอร์เวย์, บอสเนีย, บัลแกเรีย, บาสก์, ปัญจาป, ฝรั่งเศส, พาชตู, ฟริเชียน, ฟินแลนด์, ฟิลิปปินส์, ภาษาอินโดนีเซี, มองโกเลีย, มัลทีส, มาซีโดเนีย, มาราฐี, มาลากาซี, มาลายาลัม, มาเลย์, ม้ง, ยิดดิช, ยูเครน, รัสเซีย, ละติน, ลักเซมเบิร์ก, ลัตเวีย, ลาว, ลิทัวเนีย, สวาฮิลี, สวีเดน, สิงหล, สินธี, สเปน, สโลวัก, สโลวีเนีย, อังกฤษ, อัมฮาริก, อาร์เซอร์ไบจัน, อาร์เมเนีย, อาหรับ, อิกโบ, อิตาลี, อุยกูร์, อุสเบกิสถาน, อูรดู, ฮังการี, ฮัวซา, ฮาวาย, ฮินดี, ฮีบรู, เกลิกสกอต, เกาหลี, เขมร, เคิร์ด, เช็ก, เซอร์เบียน, เซโซโท, เดนมาร์ก, เตลูกู, เติร์กเมน, เนปาล, เบงกอล, เบลารุส, เปอร์เซีย, เมารี, เมียนมา (พม่า), เยอรมัน, เวลส์, เวียดนาม, เอสเปอแรนโต, เอสโทเนีย, เฮติครีโอล, แอฟริกา, แอลเบเนีย, โคซา, โครเอเชีย, โชนา, โซมาลี, โปรตุเกส, โปแลนด์, โยรูบา, โรมาเนีย, โอเดีย (โอริยา), ไทย, ไอซ์แลนด์, ไอร์แลนด์, การแปลภาษา.
- ขายในประเทศ
- รึก
- ผู้ประกอบอาขีพนี้ได้รับค่าตอบแทนเป็นเงิน
- Similar to the Thai economy in general.n
- คุณเคยมีเซ็กส์ทางทวารหนัก
- Rare-earth-doped
- Method: An online literature search was
- ภูเขา
- they can also accomodate ecological tour
- ค้นหา
- ฉันเกลียดผู้หญิงคนนี้มากไม่มีวันเหมือนเด
- เป็นที่ปรึกษาสำหรับฉัน
- the total length of the belt in the top
- Koy : ใช่ค่ะ ฉันกำลังศึกษาปริญญาโท นักเร
- Figure 1. Operation Orderings in the Sys
- Have you been thinking about me. Please
- ในอนาคต ฉันอาจจะรักคุณ
- 你当时激动吗
- 봄,사랑,벚꽃 말고
- ดังนี้
- รัฐมนตรีว่าการกระทรวงเกษตรและสหกรณ์ เตรี
- With regards to M&A, Samsung stated that
- ราคาถูก
- ร้านคุณมีโคมไฟขายไหมค่ะ
