ต่อจาก theme หนังสือ ตอนสร้างภาพ(1)นะคับ ใครยังไม่ได้อ่านตอนแรก สมควรกลับไปอ่านก่อน ไม่อย่างนั้นจะไม่รู้เรื่องเอานะคับ


จากตอนที่แล้วเราทำหน้ากระดาษด้านขวามือที่จะเป็นเนื้อที่สำหรับเนื้อหาของบล๊อคเรียบร้อยแล้ว ตอนนี้เราจะเริ่มทำหน้ากระดาษด้านซ้าย หน้ากระดาษด้านซ้ายนี่ จะมีความกว้างน้อยกว่าด้านขวา เพราะจะเป็นเนื้อที่สำหรับ Link และอื่น ๆ

• สร้างหน้ากระดาษด้านซ้ายโดยการ copy layer "rightpage" มาเป็นอีก Layer นึง ตั้งชื่อว่า "leftpage"

• ทำการหมุน Layer ไป 180 องศา โดยเลือกเมนู Edit --> Transform --> Rotate 180

• ใช้ Move Tool () เพื่อเลื่อนหน้ากระดาษด้านซ้าย ให้มาต่อกับหน้ากระดาษด้านขวาในจุดเย็บกระดาษ


คราวนี้เรามาทำปกหนังสือกัน • สร้าง layer ใหม่ ชื่อ "bookcover" ให้อยู่ใต้ layer "rightpage"
• ใช้ Rectangle marquee tools () เพื่อเลือกพื้นที่ที่จะเป็นปกหนังสือ และเทสีที่ต้องการลงไป


• สร้างเงาที่ layer "bookcover" ด้วยการเลือกเมนู Layer-->Layer Style-->Drop shadow


• สร้าง layer ใหม่ด้านบนสุด เพื่อพิมพ์ข้อความที่จะเป็น title ของบล๊อก


ตอนนี้ก็มาทำที่คั่นหนังสือ เราก็ต้องไปหารูปที่จะมาทำที่คั่นหนังสือเสียก่อน แต่รูปที่เอามาไม่ควรจะยาวมากนัก เพราะส่วนที่เราจะเอาที่คั่นหนังสือไปวางนั้น คือส่วนที่เป็น Header ของ Blog ซึ่งจะมีความสูงจำกัด

• ได้รูปมาแล้วก็เอามาใส่ลงในไฟล์ที่เราสร้างไว้เมื่อกี้ ด้วยการ copy แล้วมา paste หรือใช้ ใช้ Move Tool () ลากเข้ามาก็ได้


• ทำให้รูปนั้นดูเหมือนกับวางเฉียง ๆ ด้วยการเลือกเมนู Edit --> Transform --> Perspective แล้วเอาเมาส์ไปลากมุมด้านล่างของรูปให้ตีบลงไป


• เสร็จแล้วก็หมุนรูปไปตามเข็มนาฬิกา 90 องศา แล้วเลื่อนมาอยู่ด้านบนให้เหมือนกับวางคั่นหนังสือไว้
• แล้วทำขอบของที่คั่นหนังสือโดยการเลือกเมนู Layer-->Layer Style-->Stroke



เท่านี้ก็เสร็จเรียบร้อยคับ ต่อไปก็เป็นขั้นตอนการ Save

เนื่องจาก Blog ของ exteen นี้ มี layout ดังรูปข้างล่างนี้


ตอน save เราเลยต้องแบ่งรูปที่เราทำได้ออกเป็นสามส่วน คือส่วนบน (title) ส่วนกลาง (leftcontent + rightcontent) และส่วนล่าง (downtab)
• เราจะใช้ Slice tool () แบ่งรูปดังนี้


จะเห็นว่า กิมจิแบ่งเป็นสี่ส่วน เพราะส่วนที่เป็นส่วนกลางนั้น ไม่จำเป็นจะต้องให้มีขนาดใหญ่นัก เพราะเราสามารถสั่งที่ css ให้รูปนั้น repeat ได้ ส่วนที่จะนำไปใช้จริง ๆ คือ 1, 2, และ 4

• ทำการ save โดยใช้ File --> Save for Web แล้วเลือกเป็น Jpeg

เท่านี้ก็เสร็จเรียบร้อยแล้วคับ เดี๋ยวคราวหน้าเราจะมาต่อเรื่องการกำหนด stylesheet ในการสร้าง theme ใน theme หนังสือ ตอนจะให้ดีต้องมีสไตล์

theme หนังสือแบบที่กิมจิใช้ใน Category: บันทึกของกิมจินั้น วันนี้กิมจิจะมาอธิบายให้ฟังคับว่ามีวิธีสร้างอย่างไร ตามคำขอของคุณ☆★©>KoNPiSeD™®☆★ตั้งแต่เมื่อหลายวันก่อน


เวลาเราจะสร้างภาพเพื่อนำมาใช้กับ theme หนังสือนี้นั้น เราจะแบ่งภาพออกเป็น 2 ชุด คือ ชุดที่ใช้กับส่วนที่เป็น background กับชุดที่ใช้กับส่วนที่เป็นเนื้อหาของ Blog (ที่เป็นรูปหนังสือ)


Background
ส่วนที่เป็น Background กิมจิใช้รูปการ์ตูนที่ไป Load มาจาก Website โดยจะตัดมาเฉพาะที่อยากจะโชว์เท่านั้น ไม่จำเป็นต้องให้ใหญ่เท่ากับหน้าจอหรอกคับ เพราะจะทำให้ไฟล์ใหญ่แล้วก็จะยิ่งโหลดช้า


แล้วเรามากำหนดใน css ว่าให้รูปที่จะเป็น backgroun นั้น ให้วางไว้ที่มุมขวาล่างของหน้าจอตามตัวอย่างข้างล่างนี้ ก็เป็นอันใช้ได้ ... อ้อ! อย่าลืมกำหนดสีของ Background ให้เป็นสีเดียวกับ Background ของรูปด้วยนะคับ

	.site {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		text-align: center;
		background-color: #BEBCE1;
		background-image: url( URL ของรูป);
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: bottom right;
	}

Blog-Content
คราวนี้เรามาสร้างภาพหนังสือกัน กิมจิขออธิบายวิธีการสร้างโดยใช้ photoshop นะคับ เพราะใช้เป็นอยู่อย่างเดียว ^^"

ขนาดของภาพหนังสือนั้น จะต้องรวมความกว้างทั้งส่วนที่เป็นเนื้อหา และส่วนที่เป็นลิงค์ เข้าด้วยกัน แต่เวลาสร้างไฟล์ขึ้นมาจริง ๆ ให้กว้างกว่านั้นไว้ก็ได้คับเพราะเราสามารถที่จะมา crop ส่วนเกินทิ้งได้ในภายหลัง

• พอเราสร้างไฟล์ใหม่ขึ้นมาเรียบร้อยแล้ว Layer แรกที่เป็น Background ให้เราเทสีเดียวกับที่เป็นสี Background ที่ใช้ข้างบน (ในที่นี้คือ #BEBCE1) ลงไป


• ต่อไปเราก็สร้าง Layer ใหม่ขึ้นมา ตั้งชื่อว่า "rightpage" ซึ่งจะเอาไว้เป็น layer ของหน้ากระดาษด้านขวามือ
• ใช้ Rectangle marquee tools () เลือกส่วนที่จะเป็นกระดาษด้านขวามือ (ตรงนี้กิมจิใช้ขนาด 640pixels) แล้วเทสีขาวลงไป


• แล้วเราก็ใช้ Rectangle marquee tools () มาเลือกพื้นที่ที่จะทำเป็นเงากระดาษในส่วนที่ถูกเย็บกลางเล่ม แล้วใช้ gradient tools เทสีแบบ linear gradient (ดูรูปข้างล่างประกอบ) โดยเลือกสีจากสีเทาอ่อน (#CBCBCB) ไปจนถึงสีขาว (#FFFFFF)


• ต่อไปก็ทำขอบของกระดาษ โดยเลือกเมนู Layer --> Layer Style --> Stroke

แล้วเราจะได้ผลลัพธ์ออกมา หน้าตาดังรูป

ท่าทางหน้านี้จะโหลดนานแล้วละมั้งคับ เพราะรูปเยอะ ... เดี๋ยวเราไปต่อใน theme หนังสือ ตอน สร้างภาพ (2) ละกัน