Thiết kế web với photoshop và Frontpage

- Phần 1
Thứ bảy, 07 Tháng 11 2009 04:03 Đồ họa

Các bạn thân mến , nếu như các bạn thực sự có lòng đam mê thiết kế web thì xin hãy đọc chi tiết
những lời hưỡng dẫn , đừng phớt lờ bỏ qua , có thể bài viết này còn nhiều vướng mắc nhưng
sau khi đọc xong các bài viết này , bạn sẽ thiết kế được một trang web cho riêng mình .

Nếu bạn chỉ có ý định xem qua thì đừng mở trang nào hết vì chỉ làm tốn băng thông của trang
web mà thôi .

+ Để thiết kế được một trang web và cho nó hoạt động được , thì yêu cầu bạn phải có kiến thức
cơ bản về ngôn ngữ html . Để có được 1 giao diện đẹp thì yêu cầu bạn phải có kiến thức về
photoshop , hầu hết thời nay tất cả các trang web có hình thức đẹp đều được design từ
photoshop , sau đó nếu muốn ấn tuợng hơn thì họ đem qua flash làm cho màu mè hơn . Ở bài
này tôi sẽ không hưỡng dẫn cho các bạn tạo ra 1 trang web cụ thể nào , mà tôi chỉ hưỡng dẫn
các bạn các vấn đề cơ bản , các tutorial về nút bấm và các layout cho web có rất nhiều trên
mạng , các bạn có thể tự nghiên cứu hoặc sử dụng các tutorial có sẵn để làm đẹp trang web của
mình :

+ Sau đây là 3 phần hưỡng dẫn , bạn hãy đọc lần lượt từng phần nhé

I. Tạo bố cục:

Giao diện của một trang web được thiết kế bằng photoshop thực chất đó là một hình ảnh , bạn
cứ nghĩ rằng giao diện của một trang web không khác gì một tấm hình , bất kì một tấm hình nào
cũng có thể biến nó thành giao diện trang web .

Do đó - Về phần bố cục thì tùy vào người thiết kế , họ có thể thiết kế trên trời dưới đất gì cũng
được , trang web nhìn càng lạ mắt thì càng thu hút người xem .

Tuy nhiên , thiết kế như thế nào thì bạn vẫn phải tuân theo những quy luật sau .

1.) Phải có ý tưởng rõ ràng , bạn sẽ làm trang web về cái gì

2.) Người sử dụng trình duyệt web luôn để màn hình ở độ phân giải là 800x600 pixel và
1024x768 pixel . Nhưng theo tôi thấy đa số các trang web đều được thiết kế tương thích với độ
phân giải 800x600 pixel . Để kiểm tra độ phân giải của màn hình . Bạn làm như sau nhấn chuột
phải trên vùng trống của màn hình Desktop và chọn Properties . Sau đó kích chuột vào bảng
Setting . Hãy xem trong ô Screen area giá trị phân giải màn hình của bạn là bao nhiêu .

3.) Nếu thiết kế giao diện của trang web nhỏ hơn đôh phân giải 800x600 , thì bạn phải căn chỉnh
cho nó nằm ra giữa màn hình - việc này tôi sẽ hưỡng dẫn bên phần HTML

4.) Thiết kế các nút bấm cho trang web theo nội dung mà bạn sẽ đề ra

SAU ĐÂY TÔI SẼ TRÌNH BÀY VÀI ĐIỀU VỀ KÍCH THƯỚC CẦN THIẾT CỦA TRANG WEB
VỚI ĐỘ PHÂN GIẢI CỦA MÀN HÌNH 800x600

1.) Nếu chỉ thiết kế trang web với giao diện phù hợp với màn hình 800x600 thì bạn có thể thiết kế
giao diện trang web ở kích thước 800x600 . Tuy nhiên các trình duyệt web mà thông dụng nhất
là IE không bao giờ có thể xem đầy đủ một bức hình 800x600 , do đó chiều ngang của trang web
các bạn nên để khoảng 770 pixel , chiều cao có thể là 600 hoặc dài hơn tùy vào công việc của
các bạn

điều này sẽ làm cho trình duyệt web không hiện thanh cuộn nằm ngang , và nó sẽ không gây mất
thẩm mỹ cho trang web .
2.) Sau khi tạo một file mới trong photoshop với kích thước tùy ý của các bạn , thì sau đó các
bạn thiết kế theo sở thích của các bạn , nhưng nên chừa lại một khoảng không gian để sau này
ghi thông tin web vào đó .
3.) Theo cách thiết kế trang web của tôi , thì tôi thiết kế Banner trước , thiết kế banner trước nó
sẽ ảnh hưởng đến cách trình bày web của bạn sau này

4.) Tiếp đó là thiết kế dần xuống dưới

5.) Sau đó tiến hành thiết kế các phần nền cho web , việc này tùy vào mỗi người thiết kế

6.) Tiếp đó là bạn sẽ thiết kế những nút bấm riêng , sau đó đưa nó vào giao diện web , công
đoạn thiết kế nút bấm phải được bạn làm riêng từ trước . Hiện nay có rất nhiều tutorial về các nút
bấm đẹp , nếu không thích bạn có thể tự thiết kế theo cách riêng của mình .

nút bấm có thể là một dòng chữ bình thường hoặc là một nút bấm riêng biệt mà bạn sẽ đặt lên
giao diện trang web .

7.) Sau khi hoàn tất các công đoạn thì về mặt giao diện của trang web các bạn đã hoàn thành .
Nó thực ra chỉ là một cái Image đúng không .

CÁC BẠN CHÚ Ý : trong quá trình thiết kế thì mỗi một hình ảnh nào mà các bạn tạo ra trên trang
web thì các bạn nên làm trên từng layer riêng , để sau này nếu thấy không ưng ý chỗ nào thì bạn
sửa trên layer đó . Nên tạo ra các Set Folder để chứa các layer cùng loại , cho nó đỡ rối rắm , vì
bạn sẽ tạo ra rất nhiều layer trong quá trình thiết kế giao diện . ví dụ tôi chứa các nút bấm trong
các Set này :

(Theo Dohoavn.net)

•
•
•
•

Thiết kế web với photoshop và Frontpage

- Phần 2
Thứ bảy, 07 Tháng 11 2009 04:23 Đồ họa

Các bạn thân mến , nếu như các bạn thực sự có lòng đam mê thiết kế web thì xin hãy đọc chi tiết
những lời hưỡng dẫn , đừng phớt lờ bỏ qua , có thể bài viết này còn nhiều vướng mắc nhưng
sau khi đọc xong các bài viết này , bạn sẽ thiết kế được một trang web cho riêng mình .

II. Cắt Layout:

Cắt Layout sau khi thiết kế xong giao diện của trang web là một việc làm hết sức quan trọng , nó
có tác dụng sau

1.) Tách riêng các nút bấm ra khỏi image giao diện của trang web , việc này sẽ giúp cho bạn liên
kết được nút bấm đến một trang web khác .
2.) Tăng tốc độ tải website . Giao diện của trang web sẽ được tải nhanh hơn nếu như bạn cắt
Layout , vì những hình ảnh được cắt ra sẽ được IE tải về theo từng mảnh , nếu để nguyên một
cái Image lớn như vậy thì trình duyệt web sẽ tải về rất chậm . Nếu mà trang web cuủa bạn tải về
chậm thì sẽ làm người duyệt web dễ nản khi họ mới truy cập lần đầu tiên .
Các bước cắt Layout:
Trước tiên bạn nên cắt cái banner trước , có người thích để nguyên cái banner . có người thì
thích cắt nó ra làm nhiều mảnh , ở đây tôi không cắt nó , mà vẫn để nguyên , chỉ cắt nó ra khỏi
theme của web thôi .
1.) Nhấn K để sử dụng công cụ Slice Tool

2.) Sau đó rê chuột và cắt lấy phần mà bạn muốn cắt . Vùng nào được cắt sẽ có số màu xanh
hiện ra , vùng nào có số màu xám là vùng sẽ được photoshop tự động cắt . Việc này không ảnh
hưởng gì hết .

3.) Sau đó tôi tiến hành cắt cái mục tiêu đề làm 2 phần như các bạn thấy ở hình dưới

4.) Tiếp đó rê chuột đến cắt các nút bấm , nhớ cắt sát viền nút bấm

5.) Đối với các nút bấm không có hình dạng vuông hay chữ nhật ( như các nút bấm bên phải ) thì
các bạn có thể dịnh kích cỡ tùy ý để cắt
6.) Tiếp đó cắt vùng mà bạn dự định sẽ ghi dữ liệu lên đó thường xuyên ,sau này khi soạn web ,
chúng ta sẽ xóa cái hình bị cắt ở vùng 11 và chỗ dó sẽ dùng để gõ chữ hay chèn hình ảnh khác
7.) Tiếp đó , nếu muốn các bạn hãy cắt nhỏ những phần còn lại , mục đích là để web load nhanh
hơn thôi.

8.) Sau khi đã cắt hoàn thành , bạn hãy nhấn Ctrl+Shift+Alt+S hay vào File > Save for web để
save trang web
Trong ô Setting bạn có thể lựa chọn file xuất ra sẽ là file GIF hay là JPG , ở đây tôi sẽ xuất ra file
GIF

9.) Sau khi nhấn Save thì hãy thiết lập như hình

ô file name đặt tên là Index

ô Save as type các bạn chọn HTML and Images (*.html)

10.) sau khi Save xong , thì bạn sẽ có 1 file index.html và 1 folder tên là images trong Folder
này sẽ chứa tất cả các hình ảnh mà các bạn vừa cắt xong . Chú ý là không được đổi tên của
folder

VẬY LÀ BẠN ĐÃ HOÀN THÀNH XONG PHẦN CẮT LAYOUT VÀ LƯU TRỮ TẠO WEB

Tới đây về cơ bản trang web của bạn đã hoàn thành , bạn hãy chạy file index kia xem nào

(Theo Dohoavn.net)