WELCOME TO FORUM CLASS 12A9
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

WELCOME TO FORUM CLASS 12A9

THPT NGUYỄN TRUNG TRỰC
 
Trang ChínhGalleryLatest imagesĐăng kýĐăng Nhập

 

 Thiết kế giao diện

Go down 
Tác giảThông điệp
FT_baby

FT_baby


Nam
Tổng số bài gửi : 636
Age : 34
Đế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:
Thiết kế giao diện Left_bar_bleue1/1Thiết kế giao diện Empty_bar_bleue  (1/1)

Thiết kế giao diện Empty
Bài gửiTiêu đề: Thiết kế giao diện   Thiết kế giao diện Icon_minitimeSat 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.

Thiết kế giao diện 1

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.

Thiết kế giao diện 2

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.


Thiết kế giao diện 3

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

  • Size: 1 px,
  • Color: Black


Thiết kế giao diện 4

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

Thiết kế giao diện 5

Thiết kế giao diện 6

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

Thiết kế giao diện 7

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.


Thiết kế giao diện 8

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

Thiết kế giao diện 9

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.

Thiết kế giao diện 10

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

Thiết kế giao diện 11

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

Thiết kế giao diện 12

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.

Thiết kế giao diện 13

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

Thiết kế giao diện 14

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:

Thiết kế giao diện 15

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

Thiết kế giao diện 16

Đã 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:

Thiết kế giao diện 17

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:

Thiết kế giao diện 18

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 :

Thiết kế giao diện 19

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:

Thiết kế giao diện 20

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
http://12a9.key.as
 
Thiết kế giao diện
Về Đầu Trang 
Trang 1 trong tổng số 1 trang
 Similar topics
-
» Thiết kế giao diện
» Thiết Kế Giao Diện 2
» Thiết Kế Giao Diện - Web Interface Design
» Giao diện đơn giản
» Giao diện

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