tin tức

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

22/02/2012 - Xem: 879

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


(i-php.net)

Liên kết

Tin được quan tâm nhất

Quản cáo