Phần 1: Thiết kế giao diện web bằng photoshop

Việc thiết kế giao diện web (Xây dựng web tĩnh) phải qua nhiều bước khá phức tạp, trong bài viết này tôi sẽ giới thiệu đến các bạn chi tiết các bước thiết kế một trang web tĩnh. Bắt đầu với việc thiết kế giao diện từ photoshop đến cắt giao diện và cuối cùng là trình bày trang web bằng ngôn ngữ HTML và CSS. Việc thiết kế giao diện web được chia làm 3 phần như sau

 
Phần 1: Thiết kế giao diện web bằng photoshop

Phần 2: Cắt giao diện cho web

Phần 3: Layout web với HTML & CSS

Các bước chuẩn bị cho bài thực hành

Download các file trong forder Source để lấy hình và mẫu thiết kế.

File thiết kế bằng photoshop phải giữ nguyên Layer để cắt giao diện cho web.

Phần mềm sử dụng:

1.     Photoshop > vẽ và cắt giao diện

2.     Dreamweaver > Layout HTML & CSS

Bây giờ hãy bắt tay ngay vào công việc

Phần 1: Thiết kế giao diện bằng photoshop

Hình bên dưới minh họa sản phẩm hoàn thành sau khi thiết kế bằng photoshop, bạn có thể thay đổi theo ý tưởng của riêng mình.

Hãy bắt đầu theo các bước thực hiện 
B1. Tạo file mới
Tạo file mới có kích thước 1000x1100px, resolution: 72, mode màu: RGB color

B2. Tạo các đường hướng dẫn
Nhấn Ctrl + R > Click phải trên thước > chọn Pixel

Kéo từ thước ngang và dọc các đường hướng dẫn cho file thiết kế

Copy hình người mẫu sang file thiết kế à Nhấn phím Ctrl+T à thu nhỏ hình cho phù hợp với kích thước trang web để tạo hình nền cho ảnh.

Bước 3:
Trên layer ảnh vừa copy à chọn Add new Layer Mask à Tô màu đen lên layer mask để che nền của ảnh.

Bước 4: Tạo nền trong suốt trên ảnh nền
Tạo vùng chọn hình chử nhật (85% trang thiết kế).
Tạo layer mới, chọn màu tím cho forground à nhấn Alt + Delete à tô màu tím trong vùng chọn.
Giảm Opacity còn 25 đến 35 % để có nền trong suốt như hình.

Bước 5: Tạo menu left
Vẽ vùng chọn HCN > tạo layer mới > tô màu trắng > giảm Opacity: 70%

Thêm text cho menu

Bước 6: tạo menu top
Vẽ vùng chọn HCN > tạo layer mới > tô màu đen
Copy layer màu đen tô màu đỏ > nhấn Ctrl + [ > chuyển layer xuống dưới
Thêm text cho menu

Thêm ngôn ngữ, giỏ hàng

Bước 7: Thêm quảng cáo, sản phẩm
Thêm hình quảng cáo vào file thiết kế

Mở các file hoa mẫu

Chọn công cụ Crop tool > set thuộc tính như hình > Crop các sản phẩm có cùng kích thước với nhau

Vẽ vùng chọn Cắt ảnh > Enter

Copy các hình đã Crop sang file thiết kế > so thẳng hàng và cách đều

Thêm tên sản phẩm, giá bán, giỏ hàng

Copy cho các sản phẩm còn lại > đổi nội dung

Tương tự cho các sản phẩm

B8. Thêm form tìm sản phẩm
Chọn công cụ vẽ vùng chọn HCN có bo góc > chọn màu trắng > vẽ

Thêm nút tìm kiếm và text

B9. Thêm phần Footer

 Đã xong phần thiết kế giao diện trong chủ, nhấn Ctrl + 0 để xem kết quả. 

 

Bạn có thể Seve As thành các trang như gioithieu.psd, dichvu.psd, chitietsp.psd, lienhe.psd,… và thay đổi nội dung ở cột trái để hoàn thành bườc thiết kế giao diện bằng photoshop.

Trong phạm vi bài viết này tôi chỉ minh họa cho các bạn trang index, còn các trang còn lại các bạn thực hiện tương tự nhé.

Read More

Phần 2: Cắt giao diện cho web

Việc biến một giao diện được thiết kế trong Photoshop thành HTML là một phần rất quan trọng trong thiết kế web. Sau này nếu bạn muốn tự tạo giao diện cho trang web của mình cho dù nó động hay là web tĩnh, thì việc chuyển một thiết kế từ PSD sang HTML là việc đầu tiên bạn phải làm.
Trong phần 1 tôi đã hướng dẫn bạn cách thiết kế giao diện trang web shop hoa tươi bằng photoshop. Trong phần này, chúng ta sẽ sử dụng một giao diện đã thiết kế ở phần 1 để thực hiện cắt lấy hình ảnh đưa lên tài liệu html.
Cắt giao diện web là cắt lấy hình ảnh cho tài liệu html, còn phần văn bản và phần lặp lại các bạn sẽ bỏ đi. (Phần văn bản cho web các bạn sẽ xử lý ở phần lập trình và lấy từ database).

Nguyên tắt cơ bản:
Mỗi sản phẩm > 1 file hình.
Hình nền hay màu chuyển sắc > lấy đúng bước lặp lại và lưu thành 1 file hình.
Sử dụng các định dạng hình cho web: *.jpg, *.png, *.gif.
Công cụ sử dụng:

 Slice tool > vẽ vùng chọn cho hình, mỗi vùng chọn > tạo thành 1 file
Slice Select Tool > chỉnh vùng chọn của Slice tool
Bước 1:
Trước tiên các bạn nên phẩn tích giao diện để có được cái nhìn tổng thể nhất về giao diện mình sẽ cắt css. Từ đó bạn sẽ xác định được phần ảnh cần lưu lại và phần ảnh cần bỏ đi. Với giao diện này tôi chi làm 4 phần: Header: gồm logo, ngôn ngữ và menu top. Phần menu-left, cột phải: gồm các sản phẩm và phần footer.
Bây giờ chúng ta sẽ bắt đầu cắt giao diện theo phân chi ở trên, bắt đầu với phần header của mẫu thiết kế.

Với phần này bạn sẽ lấy logo, giỏ hàng, 2 lá cờ, phần menu và nền bỏ qua.
Sử dụng Slice tool > vẽ các vùng chọn và đặt tên tương ứng. bắt đầu cho logo

 Tương tự cho các phần còn lại như hình bên dưới

Bước 2:
Cắt hình các sản phẩm và banner quảng cáo
Dùng Slice tool > vẽ vùng chọn cho sản phẩm 1 > double click đặt tên sp1.

Dùng công cụ Slice Select Tool > chọn copy vùng chọn Slice của sản phẩm 1 cho các sản phẩm còn lại > đạt tên tương ứng: sp2, sp3, sp4,...
Tương tự bạn chon cho banner quảng cáo và đặt tên banner.
Trường hợp có 9 nút giỏ hàng cho 9 sản phẩm giống nhau nên bạn chỉ cần lưu đúng 1 giỏ hàng.

Bước 3:
Tiếp theo bạn sẽ lưu hình ảnh cho web
Chọn File / Save for web and Devices... (Ctrl + Shift + Alt + S), chọn định dạng file cho từng vùng chọn tương ứng như sau
Các sản phẩm, banner > *.jpg
Logo, các button > *.png-8

Click Save > chọn folder mới để lưu với file name: zzzzz, Save as Type: Images Only > chọn Save.
Bây giờ các bạn đã có các hình ảnh trong folder images, hãy chọn các file ảnh bạn đã đặt tên và lưu lại, các file có tên là zzzz... bạn hãy xóa bỏ.

Bước 4:
Tiếp theo là cắt lấy nền trong suốt và ảnh nền.
Dùng Slice vẽ vùng chọn hình vuông nhỏ khoản 2x2pixel > double click > đặt tên nts

Để có nền trong suốt bạn phải ẩn hình nền và background màu trắng > chọn File / Seve for Web and Devices... > chọn định dạng hình là: png-24 > Save

Tiếp theo bạn sẽ ẩn hình sản phẩm, menu, logo để lấy hình nền (nếu tinh ý bạn có thể chuyển hình nền lên trên cùng sẽ nhanh hơn). > Vẽ vùng chọn bằng Slice tool cho hình nền và đặt tên là bg.
Chọn Save for web and Devices > chọn định dạng file *.jpg > Save.

Bây giờ bạn hãy lưu các hình đã cắt vào folder images trong website.
Bạn thấy việc cắt giao diện web cũng khá đơn giản và lý thú, tuy nhiên đây là giao diện khá đơn giản. Trong thực tế giao diện sẽ khó hơn nhiều, vì thế bạn phải luyện thật cẩn thận cho trường hợp này trước đã. Ở phần tiếp theo tôi sẽ hướng dẫn các bạn cách layout giao diện bằng html và css.
Cảm ơn các bạn đã quan tâm đến bài viết này, hãy nhận xét, đánh giá và góp ý cho bài viết để chúng tôi phục vụ các bạn đọc tốt hơn. Vui lòng dùng tiếng Việt có dấu, chúng tôi sẽ phản hồi lại ngay khi Online.
 
Mọi thắc mắc các bạn cứ Comment tại đây nhé, hoặc tham gia Nhóm Học và tuyển dụng chuyên ngành Đồ họa và Dựng phim
http://facebook.com/dohoadungphim
http://facebook.com/groups/dohoa247
http://youtube.com/dohoa247
Ad: Lâm Văn Tư - 090 885 0697 

Read More

Phần 3: Layout web với HTML & CSS

Ở phần 2 bạn đã cắt giao diện chọ web và kết quả thu được là chỉ là 1 folder hình. ở phần này, tôi sẽ trình bày cách chuyển hình ảnh thành trang web tĩnh sử dụng ngôn ngữ HTML và CSS với phần mềm hỗ trợ thiết kế là Adobe Dreamweaver. Sau khi hoàn thành bước này bạn sẽ có được một trang web tĩnh hoàn chỉnh để Upload lên hosting của mình.
Để chuẩn bị cho phần thực hành này bạn phải chuẩn bị folder site_shop_hoatuoi và tạo site trong dreamweaver.

Bước 1:
Tạo site Shop_hoatuoi
Trước hết bạn khởi động Adobe Dreamweaver > chọn site / new site > đặt tên cho site như hình > click next.

Check chọn No, … như hình > next

Ở bảng này bạn chọn Edit local copies… và chọn folder site_shop_hoatuoi > next

Tiếp theo bạn chọn None / next > nhấn Done để tạo Site.

Trong site bạn tạo 2 file: index.html và myCSS.css để định dạng tài liệu.

Bước 2:
Trình bày layout chính cho trang index
Để xây dựng trang web, trước tiên ở trang index bạn cần tạo ra các khung div để chứa các thành phần của trang. Với layout như phần thiết kế trên PSD, tôi sẽ tạo các khung div chính như sau:
Index.html

Trong đó:
# main - giữ tất cả các nội dung của trang
.top - chứa logo, ngôn ngữ
.menu – chứa menu top
.left – giữ menu left
.right – chứa sản phẩm, banner quảng cáo
.footer – lưu nội dung footer
myCSS.css

Kết quả layout trang index.html như hình

 Bước 3:

Trình bày phần header (top)

Html phần top

Css phần top

Phần menu top
Html cho menu top

CSS cho menu top

 


Nhấn F12 > xem kết quả

Bước 4:
Trình bày các sản phẩm và banner quảng cáo ở cột phải.
Html cho banner quảng cáo và sản phẩm

Css cho phần sản phẩm

Nhấn F12 để xem kết quả

Bước 5:
Trình bày menu left
Tương tự phần html cho menu left như sau:

Css cho menu left

Thêm form đăng nhập cho ở menu left

Phần footer bạn thực hiện tương tự

Bây giờ bạn hãy nhấn F12 để xem kết quả trên trình duyệt web

Cảm ơn các bạn đã quan tâm đến bài viết này, hãy nhận xét, đánh giá và góp ý cho bài viết để chúng tôi phục vụ các bạn đọc tốt hơn. Vui lòng dùng tiếng Việt có dấu, chúng tôi sẽ phản hồi lại ngay khi Online.
Mọi thắc mắc các bạn cứ Comment tại đây nhé, hoặc tham gia Nhóm Học và tuyển dụng chuyên ngành Đồ họa và Dựng phim
http://facebook.com/dohoadungphim
http://facebook.com/groups/dohoa247
http://youtube.com/dohoa247
Ad: Lâm Văn Tư - 090 885 0697

Read More

Xóa ảnh có phông xanh bằng Photoshop

Với phtoshop bạn có rất nhiều cách để loại bỏ một nền trắng hoặc màu, thâm chí với nền ảnh phúc tạp. Với các Version trước bạn có thể sử dụng công cụ Extract, Mode màu, channel để xóa nền hoặc dùng các Plug-in như Corel KnockOut để xóa nền.
Với phiên bản CS5, Adobe cung cấp thêm công cụ Quick Selection tool để xóa nền rất tuyệt vời. Với công cụ này bạn có thể xóa các nền tương đối phức tạp mà cho kết quả rất tự nhiên.
Xóa nền 1 bức hình là công việc quan trọng nếu như bạn muốn ghép chủ thể vào hình khác. Bạn có thể thấy rõ những tác phẩm của việc xóa phông nền trên bìa tạp chí, trên poster, trên áp phích… Xóa phông nền không quá khó nếu như bạn tỉ mỉ và biết kiên nhẫn. Bài viết sẽ hướng dẫn bạn những cách xóa phông nền bằng phần mềm Photoshop CS5.

Th2. Ghép ảnh có nền phức tạp
Điều tiên bạn cần làm là mở bức hình mà có chủ thể bạn muốn cắt ra, sau đó nhân đôi layer background lên bằng phím tắt CTRL + J. Lý do làm vậy là đề phòng bạn có làm hỏng thì vẫn còn hình gốc để mà làm lại.

Chọn xoay ảnh ngược chiều kim đồng hồ 90 độ

Video thực hành chỉ có tại dohoa247

 

Bạn để ý sẽ thấy ảnh hơi tối và có ít mụn nhỏ, bạn hãy nhấn Ctrl + M để chỉnh ảnh sáng hơn và dùng công cụ Patch tool để xóa các lổi nhỏ trên ảnh. 

Bước 2:

Bạn chọn một file ảnh nền > copy / paste sang hình mẫu thiết kế > mở bảng Layer > kéo xuống dưới hình làm nền.

Tiếp theo hãy chọn layer người mẫu bạn vừa nhân đôi lên, ở đây sẽ là Layer 1. Bắt đầu từ đây bạn hãy… xóa phông nền.

Tạo vùng chọn với Quick Selection Tool, Tùy vào các vị trí bạn hãy chọn Brush size cho phù hợp. Có thể giữ Shift để cộng, hoặc Alt để trừ vùng chọn giống như các công cụ chọn thông thường.

Sau khi có vùng chọn cho hình ảnh, bạn Click vào Refine Edge…

Chọn chế độ View phù hợp nhất với bạn để có thể thấy rõ chủ thể, ở đây bạn chọn theo mặc định củ photoshop (On White) 

Bạn chọn công cụ Brush tool Refine Radius tool để vẽ vào vùng ảnh bạn muốn photoshop tự động xóa nền.

Điều chỉnh các tham số cho công cụ để có kết quả tốt nhất.

Radius nếu muốn mở rộng bán kính vùng chọn. Điều chỉnh Smooth để đường viền mượt hơn, điều chỉnh Feather để làm mở đường viền, điều chỉnh Contrast để tăng giảm độ tương phản, Shift edge để dịch chuyển đường viền. Chọn Output mà bạn muốn. Mình thường chọn New layer with mask để nếu có vấn đề gì còn chỉnh sửa. 

Vậy là xong, khi lấy được chủ thể ra khỏi phông nền thì bạn có thể làm bất cứ gì với hình đó. Bạn chú ý đến các vùng ảnh khó chọn, ở hình này chính là vùng tóc có kết quả rất tốt.

Read More