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 . 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




Address Book






Group

All
Friends
Family
Bitjsc
Other






Full Name : Nguyen Thu Thuy
Birthdate : 05 / 05 / 1986
Company : Bitjsc
Group : Friends



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 :


Flickr



Digg



Facebook



Myspace



Twitter



Yahoo



Youtube


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





Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678










Nguyen Thu Thuy
0912.345.678

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é

DOWNLOAD file psd & ảnh dùng cho css

DOWNLOAD SOURCE