Thứ Bảy, 19 tháng 6, 2010

Tạo address book đơn giản với photoshop - html / css

Hi mọi người, lâu lắm không vào i-php thấy có nhiều bài viết mới nên hôm nay em cũng "đú đởn" xin phép viết 1 bài :D. Trong bài viết này mình sẽ tạo 1 address book với photoshop và html/css. (Bắt chước theo address book trong hđh MAC - có chỉnh sửa đôi chút).
Đầu tiên là với photoshop :
Bước 1 : Tạo một file mới


Bước 2 : Tạo một group mới (Group 1):



Bước 3 : Tạo layer mới trong group đó. Dùng công cụ  Rounded Rectangle Tool , chỉnh độ radius là 10px và vẽ hình như sau. Ấn Ctrl + enter để tạo vùng lựa chọn rồi dùng công cụ Paint Bucket tool và đổ mầu bất kỳ cho nó sau đó ấn Ctrl+D



Chon công cụ Rounded Rectangle Tool



Để radius là 10px



Vẽ hình rồi ấn Ctrl + enter để tạo vùng lựa chọn



chọn công cụ Paint Bucket Tool



Đổ mầu rồi ấn Ctrl + D


Bước 4 : Trỏ phải vào layer đang dùng , chọn Blending option và thiết lập thông số Drop shadow , Gradient Overlay , Stroke như sau :


Drop shadow



Gradient Overlay - Nhấn vào Gradient



Chọn mã mầu như trên



Stroke



Kết quả


Bước 5 : Dùng công cụ Rectangular Marquee Tool, tạo vùng lựa chọn sau đó xóa đi


Rectangular Marquee Tool



Tạo vùng lựa chọn và xóa



Kết quả


Bước 6 : Tạo layer mới, dùng công cụ Rounded Rectangle Tool, để radius là 20px và vẽ hình, đổ mầu cho hình là mầu trắng, sau đó chọn blending options rồi thiết lập thông số như sau :


Vẽ hình và đổ mầu trắng



Thiết lập thông số Inner Shadow



Thiết lập thông số Stroke



Kết quả



Tìm 1 icon sau đó đưa vào trong hình, viết chữ ‘Address Book’.


Bước 7 : Tạo Group mới (Group 2), tạo layer mới trong đó, Dùng công cụ Rounded Rectangle Tool và vẽ hình. Làm theo từ bước 3 đến bước 5 ta được hình mới.


Rounded Rectangle Tool và vẽ hình + thiết lập thông số



Kết quả


Bước 8 : Tạo layer mới. Dùng công cụ Pencil Tool , chọn mã mầu là : #6f6464 , giữ Shift và kẻ một vài đường thẳng. Sau đó viết chữ ‘Group’ và ‘Name’ :


Chọn công cụ Pencil Tool



Giữ shift và kẻ đường thẳng + viết chữ


Bước 9 : Tạo Group mới nẳm trong Group 2 và đặt tên là left. Tạo layer mới trong đó. dùng công cụ Rectangular Marquee Tool tạo vùng lựa chọn sau đó đổ mầu với mã mầu là : #ffffff


Dùng Rectangular Marquee Tool tạo vùng lựa chọn + đổ mầu


Bước 10 : Dùng công cụ Rounded Rectangle Tool vẽ hình sau đó đổ mầu với mã mầu : #adadad rồi dùng công cụ Rectangular Marquee Tool tạo vùng lựa chọn rồi xóa đi phần thừa.



Vẽ hình rồi xóa đi phần thừa


Bước 11 : Thêm chữ, dùng công cụ Pencial Tool kẻ đường thẳng và chèn thêm một số Icon vào.
Thêm chữ + kẻ đường thẳng + chèn icon


Thêm chữ + kẻ đường thẳng + chèn icon


Bước 12 : Tạo Group mới ngang hàng với Group left , đặt tên là center. và làm như bước 8 + 10


Kết quả


Làm tương tự như vậy :




Tiếp đến là HTML / CSS


Chia làm 3 phần chính :


header



main



footer


Trong từng phần các bạn chia thẻ div tùy theo ý thích để tạo định dạng cho trang web. Đây là cách của mình :




	Address Book






























Mobile :



0912.345.678






Home :



0912.345.678






Office :



0912.345.678






Other :



0912.345.678






Fax :



0912.345.678






Address :



262 Nguyen Huy Tuong - Thanh Xuan - HN






Company :



BITJSC - 262 Nguyen Huy Tuong - Thanh Xuan - HN








Yahoo :



thuynguyen






Skype :



thuy.nguyen






Email :



thuy.nguyen@gmail.com






Website :



www.i-php.net






Follow me on :



























Note :





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.











Name






































































































































Chạy file .html sẽ hiển thị ra như sau

Css chung :
body {
font-family:arial;
color:#6f6464;
}

.page {
background:white;
margin:auto;
width:1167px;
}

hr {
margin:10px 0 10px 0;
padding:0;
color:#d2d2d2;
}

h3 {
color:#457EDA;
}

.clear {
clear:both;
}

Style css cho các class phần header :
.header {
background:url('img/header.png') no-repeat;
height:79px;
clear:both;
}

.space {
height:30px;
}

.address_search {

}

.address_search span {
margin-left:500px;
font-size:22px;
}

.search {
float:right;
margin-right:15px;
width:220px;
height:26px;
background:url('img/search.png') no-repeat;
position:relative;
}

.search input {
position:absolute;
width:160px;
left:45px;
top:5px;
border:none;
}


kết quả

Phần main mình chia làm 4 phần : left - center - right - config
Style css (class : main - left - center - right) :
.main {
background:url('img/background_main.png') repeat-y;
}

.left {
float:left;
width:240px;
border-right:solid 1px #d2d2d2;
position:relative;
}

.right {
float:right;
width:539px;
position:relative;
}

.center {
background:#d2d2d2;
min-width:250px;
padding:0;
width:auto;
margin:0 541px 0 241px;
border-right:solid 1px #d2d2d2;
position:relative;
}


kết quả


Css cho các class trong phần left :
.title {
border-bottom:solid 1px #d2d2d2;
width:100%;
padding:2px 0 2px 0;
text-align:center;
}

.group {
margin:30px 0 0 30px;
text-transform:uppercase;
}

.group_name {
margin-top:10px;
padding:10px 0 10px 5px;
}

.group_name a {
color:#6f6464;
text-decoration:none;
}

.group_name:Hover {
background:url(img/group_name_hover.png) no-repeat;
}

.group_name:Hover a{
color:#f0f7f6;
}


Kết quả


Css cho các class trong phần center :
.contentfloat {
float:left;
width:100%;
}

.contentdetail {
background:#ebeaeb;
}

.list_name {
width:100%;
color:#457eda;
font-size:12px;
}

.name_item {
margin-bottom:15px;
}

.name_item:Hover {
background:#78bbda;
color:#f0f7f6;
}

.user_image {
float:left;
margin-left:10px;
width:20%;
}

.user_image img {
width:55px;
height:55px;
}

.user_common {
margin-bottom:3px;
}

.button {
float:right;
margin-left:5px;
}

.button img {
width:15px;
border:none;
}

.name_selected {
background:#667ed8;
color:#f0f7f6;
}


Kết quả


Css cho các class trong phần right :
.allinfo {
width:90%;
margin:5%;
font-size:13px;
}

.group_selected {
background:url(img/group_name_hover.png) no-repeat;
}

.group .group_selected a {
color:#f0f7f6;
}

.social {
float:left;
margin-left:18px;
text-align:center;
}

.social_image img {
border:none;
}

.social_name {
margin-top:3px;
color:#457EDA;
}

.float_left_common {
float:left;
width:20%;
font-weight:bold;
margin-right:15px;
text-align:right;
}

.float_right_common {
float:left;
width:75%;
}

.user_image_big {
float:left;
}

.user_image_big img {
width:100px;
}

.user_info {
float:left;
margin-left:10px;
width:70%;
}


Kết quả


Css cho các class trong phần config + footer
.config {
text-align:right;
}

.float_right {
float:right;
margin-left:10px;
}

.float_right img {
border:none;
}

.config .left {
border:none;
}

.config_common {
width:90%;
margin:auto;
text-align:right;
border-top:solid 1px gray;
padding:5px 0 3px 0;
}

/**************** footer ****************/
.footer {
background:url('img/footer.png') no-repeat;
height:44px;
}


Do máy mình không có IE nên mình không test được CSS. Nếu có bị vỡ thì sửa hộ mình nhé :D

DOWNLOAD file psd & ảnh dùng cho css

DOWNLOAD SOURCE

3 nhận xét: