Huong dan thiet ke website bang photoshop
Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường Line 1px để tạo chiều sâu một cách tinh tế cho website.
Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS.
Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp.
1. Hướng dẫn thiết kế website bằng photoshop
Thiết kế website là gì
Thiết kế web bằng joomla
BÍ KÍP KINH DOANH ONLINE DÀNH CHO BẤT ĐỘNG SẢN
Cách viết bài chuẩn SEO và bán hàng tốt
SEO như thế nào để lên TOP năm 2015
Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp
và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường
Line 1px để tạo chiều sâu một cách tinh tế cho website.
Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ
chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS.
Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một
trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp.
Kết quả cuối cùng
_____________________________________________________________________
Bên dưới là kết quả từ sự nỗ lực của chúng tôi, một bố cục web gọn đẹp, chuyên nghiệp.
Demo: http://wegraphics.net/demo/item/download-movie-tut/
2.
3. Quá trình thiết kế web miễn phí bằng photoshop
______________________________________________________________
Tôi khuyên bạn nên phác thảo trước khi thiết kế web bằng cách sử dụng Photoshop, nó là bước quan trọng đầu tiên.
Hãy vẽ toàn bộ bố cục trang web của bạn ra một tờ giấy để ghi nhớ vị trí và đặc điểm của toàn bộ các đối tượng (các
cột,Button, Module, Slider…)
Dưới đây là bản phác thảo cho “dự án” website của tôi, mang tên Download.Movie.
4. Bước 1: Tài Liệu (Document)
Chúng ta hãy bắt đầu với Photoshop. Đầu tiên, tạo một file có kích thước 1024×1200 pixels với độ phân giải 72
pixels/inch, nền trong suốt. Nhập mẫu 960 grid (12 Col Grid), nó rất hữu dụng để tạo website trong khoảng 960
pixels.
Bước 2: Tạo phông nền (Background)
Tạo vùng lựa chọn (dùng the Selection Tool) kéo hết toàn bộ tài liệu, tạo một layer mới đặt tên là „background‟, tô
màu #f9f9f9 cho vùng lựa chọn (Alt+Backspace), sau đó khóa layer này lại. Tạo layer mới đặt tên là „Top’. Dùng
Rectangle Marquee Tool tạo một hình chữ nhật ở đầu trang (chiều cao khoảng 270 pixels, màu #29729f). Vào
Blending Options, tick vào Gradient Overlay, đặt Blend Mode thành Soft Light, Scale 150%.
5. Duplicate layer „Top‟, tạo thêm 1 layer mới, nhấn Ctrl+Click vào „Top‟ à Ctrl+E. Đặt tên lại cho Layer vừa gộp là
„Top‟.
Vào Filter Filter>Noise>Add Noise.
6. Tạo Layer mới đặt tên là „Login‟ Dùng Rectangle Marquee Tool tạo một biên ngang trên Top chiều cao 5px, tô màu
#162850, sau đó dùng Rounded Rectangle Tool tạo một ô nhỏ gần góc phải của „Top‟, cũng tô màu #162850.
7. Tạo chiều sâu cho vùng này bằng cách dùng Drop Shadow như hình:
8. Bước 3: Logo
Chúng ta sẽ đặt một Logo ở vùng top-left của web.
Để tạo hiệu ứng soft light cho Background, bạn có thể sử dụng công cụ Elliptical Marquee Tool tạo một hình Elip
màu trắng, sau đó Add Gaussian Blur cho nó là 40px , chỉnh lại Opacity cho phù hợp. (Mục đích để làm sáng nhẹ
vùng Logo). Tạo tiếp một elip dẹt, làm mờ nhẹ và Opacity là 20%.
9.
10. Tạo thêm 3 hình elip (mỗi hình 1 layer), đặt fill là 0% (fill chỉnh ở khung Layer), thêm Gradient Overlay cho mỗi
elip như hình bên dưới.
11. Bây giờ là phần việc thiết kế logo, hãy sử dụng trí tưởng tượng của bạn. Ở đây tôi sẽ dùng một số Shape có sẵn
trong PTS.
Dùng Rounded Rectangle Tool vẽ một hình vuông nhỏ (giữ nút shift trong khi kéo nó mới ra hình vuông). Tiếp tục
dùng Custome Shape Tool vẽ một mũi tên nhỏ.
Rasterize 2 Layer này, sau đó dùng hình mũi tên để cắt nó ra khỏi hình vuông. Nhớ xoay hình vừa cắt một tí cho
đẹp.
16. Bây giờ dùng Type Tool (T) viết tên công ty (hoặc cái gì bạn thích), add style giống như style vừa dùng với icon ở
trên.
17. Công đoạn cuối cùng để hoàn tất Header cho website là thêm Menu và khung Login/Signup. Dùng Type
Tool và thêm Drop Shadow nhẹ cho text.
Bước 4: Down-Header
Dùng Rounded Rectangle Tool vẽ một hình chữ nhật lớn dưới Logo, thêm Drop Shadow nhẹ, sau đó đặt một bức
ảnh bạn thích vào trong.
18. Bây giờ, chúng ta sẽ tiến hành tạo phần bên phải silder
Tạo một hình chữ nhật phía bên phải, đặt Fill là 0% và add style Gradient Overlay và Drop Shadow, chi tiết bên
dưới.
19.
20. Thêm text vào (thích ghi gì cũng được), có thể dùng Font Dejavu Sans (30 pt, trắng) cho tiêu đề và font Lucida Sans
(12 pt, #0b537f) cho văn bản bên dưới. Vẽ tiếp một hình chữ nhật biên mềm bằng cách dùng Rounded Rectangular
Tool (radius 2px, color #6fc630), nhấn Ctrl+T và xoay nó một tí, cuối cùng ta thêm một lớp mặt nạ, sẽ cho ra kết
quả sau.
Nhắc nhỏ: Luuv thấy chỗ Layer Mask không cần thiết mà lại dễ gây khó hiểu nhưng tôn trọng tác giả bài viết Luuv
sẽ để y nguyên như vậy, nếu bạn nào không làm được bước này có thể comment bên dưới, Luuv sẽ giải thích thêm.
Add style cho khối màu xanh như hình
21.
22. Tiếp theo, ta sẽ thêm 2 nút phía bên dưới, màu cam và màu xanh, vẫn tiếp tục với công cụ Rectangle Tool (M)…
Thêm Bevel and Emboss và Gradient Overlay để làm cho chúng trở nên chuyên nghiệp hơn.
24. Thêm text cho các nút, thêm một tí Gradient Overlay (dùng màu xanh cho nút màu xanh và tương tự cho nút màu
cam) và Drop Shadow nhẹ, tinh tế cho text để tạo hiệu ứng như sau:
Bước 5: Nội dung
Phần này là cốt lõi trong cách bố trí của chúng tôi, nơi khách vào web có thể dễ dàng tìm thấy thông tin hữu ích.
Chúng tôi muốn xây dựng cách bố trí hai cột đơn giản với một số hình ảnh và mô tả, dưới đây là kết quả chúng tôi
muốn hướng đến.
25. Tôi không muốn làm phiền bạn với những thứ không cần thiết. Rõ ràng là bạn có thể sử dụng những kĩ thuật mà bạn
đã sử dụng trong phần Header để nhận ra các đối tượng trong phần này. Một vài ví dụ ư? 2 ảnh chụp trong mục
“Coming soon on Download.Movie” được thực hiện bằng cách sử dụng các bước tương tự mà chúng tôiđã tiến hành
ở phần down-header, chỉ có duy nhất một điểm khác biệt đó là: bạn phải add Color Overlay (từ Styles; màu đen,
Opacity 30%). Nút „play‟ được ghép từ 2 thành phần giống như Logo. Sau đó bạn phải thêm Drop Shadow màu đen
70%. Một lần nữa, để làm nút „read more‟ bạn phải nhớ những gì chúng ta đã thực hiện với 2 nút màu xanh và cam
ở trên, bây giờ thay vì màu cam, xanh lá và xanh lam, hãy sử dụng màu xám.
Bước 6: Footer (Chân trang)
Thêm 3 hình chữ nhật (ở trên và dưới màu #cfdcf8, ở giữa là #162850) như hình.
26. Thêm hiệu ứng Gradient Overlay nhẹ cho Layer màu xanh lục sau đó Rasterize toàn bộ các Layer –> Add Noise.
Cuối cùng là tạo danh sách một số link cần thiết. Để tạo chấm nhỏ trước mỗi link, bạn chỉ cần sử dụng Ellipse Tool,
giữ Shift và kéo thành một vòng tròn nhỏ, tô màu #cfdcf8 cho nó và chỉnh lại độ Opacity xuống còn 20%. Duplicate
để tạo ra nhiều chấm hơn.
Chúng ta cần phải tạo thêm mô tả mục (description box), cách làm nút Read more tương tự như cách đã giới thiệu ở
phần trước, chọn font Lucida Sans. Cuối cùng là thêm Copyright ở dưới cùng.
Chuyển từ PSD sang HTML/CSSBây giờ chính là lúc xây dựng cấu trúc HTML/CSS, hãy nhìn vào hình
bên dưới để hình dung cấu trúc chính của website.
27. Bước 7: Cấu trúc HTML
Trước hết chúng ta cần tạo 2 file trắng: index.html và style.css. Sau đó, bằng cách sử dụng trình soạn thảo văn bản
yêu thích của chúng tôi (tôi viết code của tôi thông qua Notepad), chúng ta có thể khởi tạo tài liệu HTML dưới dạng
Doctype, Head và Body.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
</body>
</html>
28. Bây giờ, theo cấu trúc mô tả ở hình trên, chúng ta có thể viết cấu trúc cơ bản của html.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="top_background">
<div class="main_container">
<div class="top_bar">
</div>
<div class="header">
</div>
<div class="main_box">
<div class="slide">
</div>
<div class="tagline">
</div>
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Thêm phần Reset vào style.css như sau:
Code:
/* CSS Reset */
29. html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset,
form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: baseline; background: transparent; }
ol, ul { list-style: none; }
:focus { outline: 0; }
Bước 8: Background, Top-bar và Header
Xuất các hình sau ra khỏi file PSD để tạo Header cho web như kế hoạch.
Việc đánh dấu cho Top-bar và phần Header, chúng tôi sẽ sử dụng các list ngẫu nhiên cho menu và tag h1 cho Logo.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
31. <div class="right_content">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Thêm vào style.css đoạn Code sau. Lưu ý rằng ta sẽ import font Dejavu để sử dụng cho phần down-header.
Code:
* General */
@font-face { font-family: 'DejaVuSansCondensedBook'; src:
url('DejaVuSansCondensed-webfont.ttf') format('truetype'); }
body { background: #f9f9f9; font: 12px "Lucida Sans Unicode", sans-serif;
line-height: 1.5em; color: #555; }
a { text-decoration: none; }
#top_background { background: url(images/top_bck.jpg) repeat-x; }
.main_container { margin: 0 auto; width: 960px; background:
url(images/logo_bck.png) no-repeat; }
/* Main-container classes */
.top_bar { float: right; position: relative; top: 0px; right: -11px; width:
101px; height: 24px; background: url(images/login_bck.jpg) no-repeat;
padding-left: 11px; }
ul.login li { display: inline; padding-left: 2px; }
ul.login li a { color: #f2f2f2; font-size: 10px; }
32. ul.login li a:hover { color: #89c0dd; }
.header { clear: both; height: 80px; margin-bottom: 53px; }
.logo { float: left }
.logo h1 a { display: block; width: 345px; height: 50px; background:
url(images/logo.png) no-repeat; text-indent: -9999px; margin: 16px 0 0 40px;
}
ul.navigation { float: right; margin: 30px 40px 0 0; }
ul.navigation li { display: inline; margin-left: 30px; }
ul.navigation li a { color: #fff; font-size: 14px; text-shadow: 1px 1px
0px #155479; }
ul.navigation li a:hover { text-decoration: underline; }
Bước 9: Main-box, down-header và contents
Bây giờ, ta sẽ thêm vào phần down-header một Slider (trình diễn ảnh). Để tạo được một silder đẹp, chúng tôi sử
dụng plugin gọi là Cycle.
Đầu tiên ta tải jQuery plugin về máy và tạo file „jquery.cycle.lite.min.js‟
Mách nhỏ: Tức là mình sẽ tạo một Folder tên là Template, tiếp tục tạo một Text Document mới tên là
jquery.cycle.lite.min.txt, sau đó Paste toàn bộ nội dung của file jQuery (vừa tải về lúc nãy) vào, đổi lại định dạng
tệp là jquery.cycle.lite.min.js.
Tiếp theo, tải một file jQuery nữa về máy và tạo file jquery.js. Thêm vào index.html đoạn code sau:
Code:
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.cycle.lite.min.js"></script>
</head>
Đối với các thành phần trong main-box ta sẽ sử dụng các hình sau (xuất hình ra khỏi PSD).
33. Viết lại cấu trúc của phần main-box như sau:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="top_background">
<div class="main_container">
<div class="top_bar">
<ul class="login">
<li><a href="#">login |</a></li>
<li><a href="#">sign-up</a></li>
</ul>
34. </div>
<div class="header">
<div class="logo">
<h1><a href="#">Download.Movie</a></h1>
</div>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="main_box">
<div class="slide">
<img src="images/screenshot1.jpg" alt="screenshot" />
<img src="images/screenshot1_2.jpg" alt="screenshot" />
<img src="images/screenshot1_3.jpg" alt="screenshot" />
</div>
<div class="tagline">
<h2>The best way to watch your favourite movies</h2>
<span class="know_more_green"><a href="#"></a></span>
<p>The use of commerce is conducted in this way, spurring and
drawing on innovations in electronic funds transfer, supply chain
management.</p>
<span class="cta_browse"><a href="#"></a></span>
<span class="cta_signup"><a href="#"></a></span>
</div>
<div class="content">
<div class="left_content">
<h3>Featured entries this week</h3>
<p>We want to provide only high-quality DVD movies to our
members. High-quality,
easy-to-find: the best of the week.</p>
<ul>
<li><img src="images/screenshot2.jpg" alt="screenshot"
/><h4 class="orange"><a href="#">The first movie this week</a></h4><p>The
group sets out for the treasure. They walk to Pete's cousin's house</p><span
35. class="details">dur. 110’ | action | 2011 | <a
href="#">more...</a></span></li>
<li><img src="images/screenshot3.jpg" alt="screenshot"
/><h4 class="green"><a href="#">The first movie this week</a></h4><p>The
group sets out for the treasure. They walk to Pete's cousin's house</p><span
class="details">dur. 110’ | action | 2011 | <a
href="#">more...</a></span></li>
<li><img src="images/screenshot4.jpg" alt="screenshot"
/><h4 class="cyan"><a href="#">The first movie this week</a></h4><p>The group
sets out for the treasure. They walk to Pete's cousin's house. </p><span
class="details">dur. 110’ | action | 2011 | <a
href="#">more...</a></span></li>
</ul>
</div>
<div class="right_content">
<h3>Featured entries this week</h3>
<div class="box_trailer">
<a href="#"><img src="images/screenshot5.jpg"
alt="screenshot" /></a>
<span class="meta_info meta_orange">action |
12.04.2010</span>
<h4 class="orange"><a href="#">A new movie is coming on
our website</a></h4>
<p>Rumpelstiltskin tricks a mid-life crisis burdened
Sdrok into allowing himself to be erased from
existence and cast in a dark alternate...</p>
<span class="trailer_more"><a href="#"></a></span>
</div>
<div class="box_trailer">
<a href="#"><img src="images/screenshot6.jpg"
alt="screenshot" /></a>
<span class="meta_info meta_green">drama |
12.04.2010</span>
<h4 class="green"><a href="#">Another movie
downloadable</a></h4>
<p>Work causes a single mother to move to China with her
young son; in his new home, the boy embraces kung fu, taught to him by a
master.</p>
<span class="trailer_more"><a href="#"></a></span>
</div>
41. Giờ làm việc (từ thứ 2 đến thứ 7( thứ 7 làm việc buổi sáng)).
Sáng: 8h – 12h
Chiều :13h30 – 17h30
Nguyễn Hữu Đức – Phòng kỹ thuật dịch vụ số – Marketing Online giải pháp kinh doanh Online
Bạn muốn thành công trên internet hãy ghé thăm dịch vụ số để được
chia sẻ miễn phí
Facebook: https://www.facebook.com/TrungTamDaoTaoDichVuSo
Website: http://dichvuso.edu.vn