เปิดป้อม Volterra ต้อนรับ New Moon
posted on 16 Oct 2009 03:03 by solma in Graphic, Theme
ไม่เจออาโร กด F5!!!
Best view on FireFox
สำหรับคนที่ทำ Theme Blog ส่วนใหญ่คงเป็นคล้ายๆกันคือเราจะมีมาตฐาน หรือ pattern ที่อยู่ในใจอยู่แล้ว จึงเห็นได้ว่าบ่อยครั้งเวลาออกแบบ theme ก็มักจะมีรูปแบบที่ตายตัว หรือ ทำออกมาคล้ายๆของเดิมเปลี่ยนก็แต่ส่วนที่เป็นรายละเอียดปลีกย่อย
โซลเองตอนจะออกแบบ theme ใหม่ก็เพราะมันเบื่อแบบเก่าๆ แต่ร่างไปร่างมาสุดท้ายออกมาก็เป็น Pattern แบบคล้ายของเดิมอย่างช่วยไม่ได้ จากแบบเก่าสุดคือ TwilightDVD มาเป็น Three Things
สังเกตุได้ว่ามีการเปลี่ยนแปลงที่รายละเอียดบางส่วนแต่ทั้ง leg ทั้ง content และกล่อง comment นั้นออกมาก็คล้ายกัน โดยเฉพาะเรื่อง Graphic ก็ไม่ต่างเท่าไหร่ ที่พูดมานี่ไม่ใช่อะไรแค่อยากบอกให้เข้าใจว่ามีปัญญาแค่นี้อ่ะ
สำหรับ Theme ใหม่ที่เสนอวันนี้
The Volturi.Theme
ส่วนนี้เป็นองค์ประกอบ
หัวบล็อกเป็นรูป Volturi อยู่ด้านขวา แต่แทนที่จะเอารูปมาทื่อๆเลยก็ไม่ดี จึงให้ขอบดูฟุ้งๆ บางคนใช้คำสั่งจะพวก Marquee Tool และปรับ Selection ส่วนของ Feather ให้ขอบของ Selection เบลอฟุ้ง แต่ของโซลมักใช้การสร้าง Layer Mask และใช้หัว Brush ประเภท Cloud วาดที่ Layer Mask รูปที่ได้จะดูนิ่มนวลกว่า
ที่หัวมุมตกแต่งด้วย Brush แบบ Floral ตกแต่ง layer effect ทำขอบให้ฟุ้งด้วยคำสั่ง outer glow สีแดงเข้ม ส่วนด้านซ้ายของหัวบล็อกหา Font ที่ดูอ่อนช้อยและโบราณหน่อยๆ เขียนคำว่า Vampires Zone คั่นด้วยเส้นสีขาว และ Url http://solma.exteen.com และเพิ่ม layer effect แบบเดียวกับอีกด้านหนึ่ง
โดยได้ความรู้ใหม่มาคือคำสั่ง Copy Layer Style
แล้วนำไป Paste ที่อีก Layer จะทำให้ได้ Effect แบบเดียวกันเป๊ะ ซึ่งมีส่วนช่วยทำให้รูปแบบเหมือนกันทุก Layer ทำให้รูปภาพดูกลมกลืน ฟังดูเหมือนง่ายแต่ตอนทำต้องลองไปลองมา กว่าจะได้สีที่ถูกใจ หรือได้หัวแปรง (brush) ที่เข้ากันได้และดูแล้วไม่ขัดตา
ท้ายบล็อกทำ BG ในส่วนของ Leg เป็นรูปฝ่าท่อระบายน้ำเมือง Volterra กับ รูปตรอกมืด ซึ่งดูหม่นมืดได้อารมณ์ดี ประดับลวดลายดอกไม้และ effect แบบเดียวกับด้านบน ตรงกลางเขียนชื่อ Theme Blog
ส่วนของ Sidebar ใช้พู่กันสีแดงสดป้ายให้ดูเหมือนเลือดที่เอามือป้ายๆ ทำให้ดูถึงเลือดดี (เลียริมฝีปาก)
ในส่วนของกล่อง Comment นั้นเอาใจคนหัวโรแมนติก จึงให้มีรูปเอ็ดเวิร์ดและเบลล่า (แต่เป็นรูปจูบกันอีกแล้วอ่ะ) ที่อยู่ตรงตรอกใกล้ Palazzo Dei Piori มี Quote สั้นๆว่า
"So, maybe this is hell. I' don't care, I'll take it."
"แม้นนีคือนรก...ก็ไม่ขอใส่ใจอีกแล้ว...จะรับมันเอาไว้เอง"
เป็นคำพูดที่เอ็ดเวิร์ดกล่าวแบบเบลอๆ นึกว่าตัวเองตายไปแล้วหลังจากที่เบลล่าวิ่งเข้าไปกอดเขาที่ Palazzo Dei Piori คิดว่ามันเข้ากับรูปดีอ่ะนะ
ส่วนนี่เป็น Code
/*Normal Theme for the new exteen*/
/*Copyright by Etceto co,ltd. 2007*/
/*======================================================================*/
/* Simple Reset - Not Editable*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
/* General */
body {
background:#0c0d0d url(http://aom.host108.com/twilight/Vtheme/TheVolturi.themeBG.jpg) no-repeat left top;
color:#c0c0c0;
font:14px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}
a:link, a:visited{
color:#b63c3c;
text-decoration:none;
}
a:hover, a:active{
color:#ffbebe;
}
#page{
margin:10px 0px 5px 0px;
padding-top:11px;
text-align:left;
width:990px;
float:left;
}
#header, #neck, #belly, #leg, #footer{
float:left;
width:1000px;
}
/*======================================================================*/
/* Header */
#header{
display:none;
/*background:#FFF;*/
padding:20px 0px 20px 0px;
text-align:center;
position:relative;
}
#header h1 a{
color:#666;
font-size:24px;
}
#header h1 a:hover{
color:#999;
}
#header h2{
font-size:12px;
margin:5px 0px 5px 0px;
}
#coverimage{
display:none;
}
/*======================================================================*/
/* Neck Menu */
#neck{
background:none;
}
#neck .module{
background:none;
display:inline;
float:left;
margin:0px 0px 0px 200px;
padding:2px 0px 5px 0px;
width:450px;
}
#neck .module ul{
display:inline;
margin:0px;
padding:0px;
font-weight:bold;
}
#neck .module h2{
display:none;
}
#neck .module li{
border-right:1px solid #8c5a55;
display:inline;
padding:0px 10px 0px 10px;
}
/*======================================================================*/
/* Content */
#belly{
background:none;
}
#content{
display:inline;
float:left;
margin:300px 2px 0px 2px;
padding:5px;
width:450px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
border-right:1px #686868 dashed;
border-left:1px #686868 dashed;
border-top:1px #686868 dashed;
border-bottom:1px #686868 dashed;
}
.entry{
float:left;
margin-bottom:15px;
border-bottom:1px solid #686868;
}
.entry .title{
display:block;
float:left;
margin-bottom:10px;
width:100%;
}
.entry .title h2{
font-size:18px;
width:450px;
}
.entry .title h2 a{
color:#caabbb;
}
.entry .title h2 a:hover{
color:#ff3c58;
}
.entry .title span{
color:#caabbb;
font-size:10px;
}
.entry .post{
float:left;
}
.entry .post p{
margin-bottom:10px;
}
.entry .info{
float:left;
width:100%;
}
.entry .info .tag{
float:left;
background:url(http://aom.host108.com/twilight/Vtheme/areament.png) repeat;
font-size:10px;
width:100%;
}
.entry .info .coms{
float:right;
font-size:30px;
text-align:right;
margin-bottom:10px;
color:#eb5959;
font-family:Georgia;
}
/*======================================================================*/
/* Sidebars */
#sidebar{
background:none;
float:left;
display:inline;
margin:10px 5px 0px 5px;
padding-top:400px;
width:200px;
text-align:right;
}
#sidebar2{
background:none;
float:right;
display:inline;
margin:10px 5px 0px 5px;
padding-top:400px;
width:300px;
text-align:left;
}
#sidebar .module, #sidebar2 .module{
margin:10px 0px 30px 5px;
}
#sidebar .module ul, #sidebar2 .module ul{
margin:5px 5px 5px 0px;
padding:5px;
list-style:none;
font-size:11px;
border-right:1px #686868 dashed;
border-left:1px #686868 dashed;
border-top:1px #686868 dashed;
border-bottom:1px #686868 dashed;
}
/*ใช้แก้ลิงค์ที่ไซด์บาร์*/
#sidebar .module li, #sidebar2 .module li{
border-bottom:1px #686868 solid;
text-indent:10px;
}
#sidebar #previous h2, #sidebar2 #previous h2{ background:url(http://aom.host108.com/twilight/Vtheme/Sd-pre.png) no-repeat;width:170px;height:61px;}
#sidebar #recommend h2, #sidebar2 #recommend h2{ background:url(http://aom.host108.com/twilight/Vtheme/Sd-rec.png) no-repeat;width:161px;height:75px;}
#sidebar #commentalert h2, #sidebar2 #commentalert h2{ background:url(http://aom.host108.com/twilight/Vtheme/Sd-pre.png) no-repeat;width:170px;height:61px;}
#sidebar #favourites h2, #sidebar2 #favourites h2{ background:url(http://aom.host108.com/twilight/Vtheme/Sd-fav.png) no-repeat;width:134px;height:55px;}
#sidebar #links h2, #sidebar2 #links h2{ background:url(http://aom.host108.com/twilight/Vtheme/Sd-lin.png) no-repeat;width:117px;height:52px;}
#sidebar #categories h2, #sidebar2 #categories h2{ background:url(http://aom.host108.com/twilight/3t-catagories2.jpg) no-repeat;width:222px;height:81px;}
#sidebar .module h2, #sidebar2 .module h2{
border-bottom:0px #301212 solid;
font:0px Century Gothic;
color:#000;
}
/* Sidebar Header image */
/*#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(http://aom.host108.com/twilight/Vtheme/Sd-rec.png) no-repeat;width:161px;height:75px;}
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://aom.host108.com/twilight/Vtheme/Sd-pre.png) no-repeat;width:160px;height:71px;}
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(http://aom.host108.com/twilight/Vtheme/hd-comment2.png) no-repeat;width:161px;height:61px;}
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(http://aom.host108.com/twilight/Vtheme/3t-Favourites.jpg) no-repeat;width:145px;height:120px;}
#sidebar #links h2,#sidebar2 #links h2{background:url(http://aom.host108.com/twilight/Vthemeht/3t-Links.jpg) no-repeat;width:101px;height:93px;}
#sidebar #categories h2,#sidebar2 #categories h2{background:url(http://aom.host108.com/twilight/Vtheme/3t-catagories.jpg) no-repeat;width:144px;height:120px;}
#sidebar #archives h2,#sidebar2 #archives h2{background:url(http://g.exteen.com/t/darkapollo/hd_archives.png) no-repeat;width:89px;height:19px;}
#sidebar #tags h2,#sidebar2 #tags h2{background:url(http://g.exteen.com/t/darkapollo/hd_tags.png) no-repeat;width:49px;height:23px;}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(http://aom.host108.com/twilight/Vtheme/hd_pages2.png) no-repeat;width:130px;height:103px;}*/
a.archive{
background:url(http://g.exteen.com/t/simple/icon_archive.gif) no-repeat;
width:12px;
height:12px;
padding-left:15px;
margin-left:4px;
}
/*======================================================================*/
/* Configure each module */
/* Profile */
#profile{
width:95%;
height:64px;
}
#profile img{
float:left;
margin-right:10px;
}
#profile span{
display:block;
}
#profile .info{
width:100% !important;
width:60%;
}
/* Tags */
#tags li{
display:inline;
margin-right:5px;
}
/*======================================================================*/
/* Comment Form */
#commentform{
background:url(http://aom.host108.com/twilight/Vtheme/commentbg.png) no-repeat;
float:left;
width:450px;
height:400px;
padding:100px 0px 0px 0px;
}
#commentform form{
padding:0px 0px 20px 0px;
border-bottom:3px solid #686868;
}
#commentform h3{
padding-top:22px;
font:0px Century Gothic;
color:#301212;
}
#commentform .formrow{
margin:0px 0px 0px 0px;
padding:0px;
}
#commentform label{
margin:0px 0px 0px 0px;
float:left;
width:150px;
color:#ffbebe;
font:15px Century Gothic;
}
#commentform input.textbox{
width:150px;
}
#commentform textarea{
background:url(http://aom.host108.com/twilight/Vtheme/areament.png) repeat;
width:280px;
height:150px;
margin:0px 0px 0px 150px;
float:left;
}
/*======================================================================*/
/* Comment (Showing Area) */
.comment{
border-bottom: 3px solid #820008;
float:left;
margin:0px 10px 0px 10px;
padding-bottom:5px;
width:90%;
padding: 10px;
}
.comment .post{
float:left;
width:96%;
padding:10px;
font-size:13px;
border-bottom:1px dashed #820008;
color:#787878;
}
.comment .post p{
margin-bottom:10px;
}
.comment .info{
text-align:left;
font-size:11px;
width:100%;
margin-left:0px;
color:#ffa6a6;
font-weight:normal;
}
.comment .info img{
width:32px;
float:left;
margin:5px 10px 0px 10px;
}
.comment .info a.commentno{
font-size:30px;
float:right;
color:#eb5959;
font-family:Georgia;
}
/*======================================================================*
/* Leg Menu */
#leg{
background:url(http://aom.host108.com/twilight/Vtheme/footter.jpg) no-repeat;
width:990px;
height:400px;
margin:0px 0px 0px 0px;
}
#leg .module{
background:none;
display:block;
margin:0px 0px 0px 230px;
padding:2px 0px 5px 0px;
float:left;
width:130px;
}
#leg .module ul{
background:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-weight:bold;
}
#leg .module h2{
padding-top:22px;
border-bottom:0px #301212 solid;
font:0px Century Gothic;
color:#301212;
}
#leg #commentalert h2{background:url(http://aom.host108.com/twilight/3t-LatestComments2.jpg) no-repeat;width:222px;height:81px; color:none;}
/*#leg .module li{
padding:0px 10px 0px 10px;
text-align:left;
border-bottom:0px #8c5a55 solid;
text-indent:10px;*/
}
/*======================================================================*/
/* Footer */
#footer{
background:none;
width:900px;
height:60px;
margin:15px 25px 0px 25px;
}
#footer p{
background:none;
width:900px;
height:0px;
font-size:10px;
text-align:center;
margin:15px 25px 0px 25px;
padding:5px;
}
/*======================================================================*/
.navbar{
float:left;
}
.commentmanage{
clear:both;
}
/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer { behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
behavior: url(/global/iepngfix.htc)
}
ไม่รู้ว่าจะมีใครสงสัยไหมว่างานนี้ไม่มี Wallpaper ออกมาบ้างหรือไร?
ดังนั้นพบกับนี่....
Ver.1
Ver. 2
Brush ต่างๆที่ใช้
- Cloud Brushes by Blazter [JavierZhX]
- Vector Flower Brushes II by Yasny chan
- SS butterflies n trails
- floral frame brushes
- floral1 brushes by hawksmont
- Big Brush Strokes
Fonts ที่ใช้
- Renaissance
- Perpetua Titling MT
- Be safe
- Edwardian Script ITC
- Old Script
- Monotype Corsiva
- Garamond
Picture ที่ใช้
CSS ที่ใช้ศึกษา
ว่าแต่ลองอ่านที่โซลอธิบายแล้ว เราก็ยังคงไม่เข้าใจอยู่ดี เรื่องกราฟฟิคอะไรแบบนี้มันเป็นภาษาต่างดาวสำหรับเราไปเลย 
จริงๆมุกว่าที่เราเปลี่ยน pattern ไม่ได้ก็เพราะ component ที่เราต้องการนั่นแหละค่ะ เรายังต้องการพื้นที่เท่าเดิมสำหรับของพวกนี้ นอกจากจะตัด/เพิ่มบางอย่าง ซึ่งก็ไม่ค่อยทำกัน เพราะเราก็ไม่อยากเปลี่ยนแปลงสิ่งที่เราคิดว่าลงตัวดีอยู่แล้วใช่มะ
#1 By มุก on 2009-10-16 09:00