WELCOME TO FORUM CLASS 12A9

THPT NGUYỄN TRUNG TRỰC
 
IndexGalleryĐăng kýĐăng Nhập

Share | 
 

 Thiết kế giao diện

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
FT_baby



Nam
Tổng số bài gửi : 636
Age : 26
Đến từ : Hồ Chí Minh City
Nghề nghiệp : Lính Đánh Thuê
Thần tượng : Dĩ nhiên là Rên(Rain) rồi
Registration date : 15/09/2007

Character sheet
Music:
1/1  (1/1)

Bài gửiTiêu đề: Thiết kế giao diện   Sat Jan 12, 2008 10:05 pm

Khi bạn bắt tay vào thiết kế một trang web bạn phải xem xét kỹ kích thước của nó. Nếu bạn tạo một file hình với kích thước 1024 x 768, thì tôi nghĩ nó không thích hợp cho lắm vì nếu máy của bạn có độ phân giải là 1024 x 768 thì trang web hiển thị tốt nhưng đối với những máy có độ phân giải 800 x 600 thì sao...? chắc chắn là bạn phải dùng thanh cuộn để mà kéo qua kéo lại mới xem được nội dung trang web. Mà phần nhiều các pc(ở nước ta ) bây giờ đều sử dụng độ phân giải 800 x 600.

Do vậy, theo tôi nghĩ kích thước tốt nhất để hiển thị trang web là 780 x 580. Có thể bạn nghĩ tại sao không phải là 800 x 600.? Tại sao lại nhỏ như vậy? Không nhỏ đâu bạn ạ, tuy các màn hình đều sử dụng độ phân giải 800 x 600 nhưng màn hình này sẽ hiển thị khác màn hình kia, có thể lớn hơn hoặc có thể nhỏ hơn... Vì vậy kích thước này là thích hợp,Tuy tôi nói chiều cao là 580, nhưng thực ra đối với layout lại như tôi sắp trình bày đây thì chiều cao không quan trọng , bời vì bạn sẽ cắt hình ra sau khi hoàn thành à áp dụng các tính năng như kéo dãn hình, set background... của trình thiết kế web d9e63 bạn hiển thị layout loại này...

Các bạn đã hiểu cơ bản về kích thước của một trang web, bây giờ chúng ta sẽ bắt đầu.

Tạo một file hình mới nền trắng, kích thước 780 x 580 pixels.
Tạo một layer mới, đặt tên là header. Sau đó chọn công cụ Rectangular Marquee Tool (M) vẽ một vùng chọn như hình để làm Header cho trang web.



Vẫn giữ vùng chọn, vào Select -> Modify -> Smooth. Để bo tròn 4 góc của vùng chọn, trong ô Sample Radius bạn gõ vào 2 px, OK. Ta được vùng chọn như sau.



Fill màu cho vùng chọn, bạn có thể fill bất cứ màu gì cũng được. Sau đó Cttl + D để bỏ chọn.
Nhấp chuột phải vào layer header chọn Blending Option...
Hộp thoại Layer Style hiện ra, bạn chọn vào ô Drop Shadow và set các giá trị như sau:

  • Opacity: 50%,
  • Distance: 2 px,
  • Size: 2 px.




Chọn tiếp Stroke và thiết lập thông số sau:

  • Size: 1 px,
  • Color: Black




Click vào Gradent Overlay và thiết lập các thông số như sau:





Ok, Ta được hình sau:



Ctrl click vào layer header để lấy vùng chọn, sau đó và Select -> Modify -> Contract... 10 px.

Tiếp theo, bạn tạo một layer mới nằm trên layer header và đặt tên cho nó là inner header. Chọn layer inner header và fill màu #032A5F cho vùng chọn. Sau đó Ctrl + D để bỏ chọn.

Click chuột phải vào layer inner header chọn Blending Option... Hộp thọai layer hiện ra.

Chọn Inner Shadow và set:

  • Blend Mode: Normar,
  • Color: While,
  • Angle: 130,
  • Distance: 2 px.
  • Choke: 10 %,
  • Size: 2 px.




Ok, ta được hình sau:



Bây giờ ta thêm tí màu mè cho header của ta thêm hấp dẫn.
Ctrl click vào layer inner header để lấy vùng chọn, sau đó chọn công cụ Elliptiacal Marquee Tool (M).

Trên thanh Option chọn Subtract from selection.



Sau đó vẽ một elip như hình:



Ta được vùng chọn sau:



Tạo một layer mới nằm trên trên layer inner header và đặt tên là cloudy. Bấm D để trả màu mặc định cho PTS, X để đổi màu foreground với background.

Chọn công cụ Gradient Tool. Trên thanh option chọn Linear Gradient, Foreground to Transparent.



Giữ phím shift và kéo một đường từ trên xuống. Sau đó bỏ chọn vạ Opacity của layer cloudy xuống còn khỏang 65%.



Bạn thấy mép của layer hơi rạng rạng phải không ? , để cho mềm hơn bạn chọn công cụ Rectangular Marquee Tool (M), cũng ở trên layer cloudy bạn chọn như sau:



Vào Filter -> Blur -> Gaussian Blur... Radius: 2px



Đã xong header... bây giờ thì các bạn đặt thêm logo hay tên web của bạn vào...

Kết quả của tui nè...

Click here --> Header

Tiếp theo, ta tạo thanh Navigasion bar.
Chọn công cụ Rectangular Marquee Tool (M) và kéo tạo vùng chọn sau:



Sau đó vào Modify -> Smooth... Sample Radius: 2 px.
Tạo một layer mới, đặt tên là nav bar, Fill màu cho vùng chọn, fill màu gì cũng được. Sau đó bỏ chọn.

Click chuột phải lên layer header chọn Copy Layer Style, sau đó click chuột phải lên layer nav bar, chọn Paste Layer Style. Ta được hình sau:



Bạn cũng có thể copy layer header vau đó Ctrl + T để căn chỉnh...

Bạn thêm vào bar các link liên kết... để hoàn chỉnh nó.
Kết quả bar của tôi đây:

Click here --> NAV Bar

Tạo thân website.
Chọn công cụ Rectangular Marquee Tool (M) và vẽ một hình chữ nhật :



Select -> Modify -> Smooth... Sample Radius: 2 px.
Tạo một layer mới đặt tên là body, và fill màu bạn muốn, sau đó bỏ chọn.

Click chuột phải lên layer header chon copy Layer Style, sau đó click chuột phải lên layer body chọn Paste Layer Style.
(Bạn cũng có thể copy layer header sau để Ctrl + T để căn chỉnh)

Ctrl click vào layer body để lấy vùng chọn, Select -> Modify -> Contract... 10 px.

Select -> Transform Selection. Sau đó kéo vùng chọn lên một chút như hình:



Tiếp tục, tạo một layer mới đặt tên là inner body và fill màu #032A5F. bỏ chọn

Copy layer style của layer inner header và paste vào layer inner body.

Xong, vậy là chúng ta đã thiết kế xong một layout của trang web... Còn phần cách ráp vào web như thế nào cho hợp lý thì các bạn đọc bài Build up layout của Lão Bá Tước.

Kết quả cuối cùng: CLick here

Demo của layout này nè: Click here
Về Đầu Trang Go down
Xem lý lịch thành viên http://12a9.key.as
 
Thiết kế giao diện
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang
 Similar topics
-
» Giao lưu 2 Khóa 86 và 87TuNghia Nhân Ngày 20-11
» Thiết bị trên boong
» Thiển cận...
» Danh mục thiết bị thông tin và liên lạc hàng hải
» Thiết bị buộc tàu (mooring equipment)

Permissions in this forum:Bạn không có quyền trả lời bài viết
WELCOME TO FORUM CLASS 12A9 :: Kiến thức tin học :: Photoshop :: Một số ứng dụng hay-
Chuyển đến