Hô biến một file PSD thành giao diện web với HTML, CSS

5419
thiết kế giao diện web bằng file psd

Dạo gần đây mình có làm 1 task cắt HTML, CSS và mình cảm thấy nó khá là thú vị. HTML và CSS thì chắc chắn chẳng xa lạ gì với mấy bạn biết code, nhưng khi thực sự bắt tay vào làm mới thấy phát sinh rất nhiều vấn đề, và thay vì phải mò mẫm như mình, mình sẽ hướng dẫn các bạn step-by-step để thiết kế giao diện web bằng file PSD với HTML, CSS.

Bài viết này chỉ sử dụng CSS3 và HTML5, không sử dụng bất kì frameworks nào khác như Bootstrap hay Zurb Foundation. Sử dụng framework thiết kế web lẽ dĩ nhiên nhanh hơn nhiều, nhưng nếu CSS thuần bạn tốt rồi, thì dùng hay ko dùng framework chỉ là chuyện nhỏ, bạn sẽ không bị phụ thuộc vào nó.

Đây là trang web mà hôm nay chúng ta sẽ làm:

Để bắt đầu, hãy download file PSD ở đây, sau đó mở nó trong PTS.

Tạo một thư mục với tên project mà bạn thích. Tại đây, tạo 2 thư mục: css (cho các file css) và images (cho ảnh).

Tiếp theo, mở phần mềm để code và tạo 2 file. File đầu tiên là index.html. Đây là giao diện chính của trang web, để nó ở thư mục gốc. Tạo file style.css trong thư mục css, đây là nơi chúng ta sẽ viết css để định dạng giao diện cho file index.html.

Giờ thì bắt đầu với những dòng đầu tiên mà file HTML nào cũng phải có:

Trong đoạn code trên có 1 đoạn <!--[if lt IE 9]>..., nó sẽ cần thiết khi mà dùng các trình duyệt cũ như IE8 trở xuống. Nếu không quan tâm đến trình duyệt có thể bỏ qua.

Giờ mở file index.html trên trình duyệt, bạn sẽ thấy 1 dòng chữ “Sample text”.

Giờ nhìn vào design và thử chia nó thành các phần. Phía trên cùng, bạn sẽ thấy 1 thanh màu đen với logo và navigation menu. Bạn có thể gọi nó là .header. Tiếp theo là một khối bức ảnh và dòng chữ quảng cáo, hãy gọi nó là .hero. Sau đó là một khoảng màu trắng với nội dung chính, chúng ta có thể gọi nó là .middle (hoặc bất cứ tên nào bạn thích). Cuối cùng cũng là dưới cùng _ .footer.

Giờ hãy bắt đầu với các khối chính:

Thêm style cho nó. Đầu tiên, sử dụng Eric Meyer tool để reset toàn bộ thuộc tính của các thẻ tag. Chỉ cần copy và dán vào đầu file CSS (tin mình đi, cái này không thừa tí nào đâu, mấy cái margin, padding mặc định làm mình muốn phát điên). Sau đó thêm đoạn này:

Giờ, bỏ các gạch chân ở thẻ <a>, và lưu ý là đừng bao giờ tự động thêm gạch chân dù là :hover:active,… nếu không được yêu cầu.

Giờ mở PTS và đo chiều rộng của trang, dùng “Rectangular Marquee Tool” hoặc ấn M.

Theo bảng thông tin hoặc điểm trỏ chuột vào chúng ta thấy được chiều rộng là 1140px, nó cũng là chiều rộng của .container.

Nếu nhìn kĩ hơn, bạn có thể nhận ra phần header và footer có cùng background. Ẩn grid đi bằng cách ấn Ctrl + H và phóng to design lên để tìm phần tử được lặp lại. Chọn và copy nó bằng cách ấn Ctrl + Shift + C.

Sau đó tạo 1 file mới, dán phần vừa copy vào, và lưu nó bằng cách ấn Ctrl + Alt + Shift + S, chọn lưu vào thư mực images với tên bg-texture.jpg. Tiếp theo enable Eyedropper Tool và click vào footer. Giờ bạn đã có mã màu của khối màu tối, chúng ta sẽ set background-color cho nó, trong trường hợp bg-texture.jpg chưa được tải lên.

Thêm vào file css:

Giờ refresh trình duyệt, đây là những gì bạn thấy:

Giờ lưu bức ảnh ở khối .hero và đặt tên bg-hero.jpg. Đo chiều cao của bức ảnh đã lưu (465px) và thêm vào file css.

Giờ bạn đã thêm bức ảnh đó vào giữa khối .hero bằng cách setting 50% – 50%. Thuộc tính background-size: cover yêu cầu trình duyệt kéo bức ảnh tới kích thước tối đa theo chiều rộng hoặc chiều cao, nó sẽ giúp bức ảnh ko bị méo.

Đây sẽ là những gì bạn nhìn thấy:

Giờ tiếp tục với phần header. Lưu ảnh logo và đặt tên logo.png. Phần code HTML cho header sẽ như thế này:

Quay lại trình duyệt.

Giờ là lúc tạo style cho các phần tử này. Đo khoảng cách phía trên giữa logo và đầu trang trong PTS, thêm css:

Giờ đến slogan:

Font chữ là “Time New Roman”, size 16px, in nghiêng và màu trắng với opacity 35%.

Tiếp theo đến phần navigation. Mỗi phần tử có một icon riêng. Để tiết kiệm thời gian tải trang, hãy tạo 1 sprite (chứa nhiều ảnh) từ các icon, trình duyệt sẽ chỉ phải load 1 ảnh thay vì 3 ảnh. Để làm được điều đó, tạo 1 file mới trong PTS và ném các icon vào đấy. Lưu dưới tên nav-icons.png.

Tiếp theo là viết css cho phần menu. Bạn cần set menu bên tay trái nên chúng ta sẽ sử dụng float: right. Các thẻ <li> mặc định là sẽ xếp hàng dọc , chúng ta có thể cho nó thành 1 dòng bằng cách thêm float: left (hoặc là sử dụng display: inline-block). Ngăn cách giữa các item trong menu có 1 đường kẻ màu xám, nên thêm border-left: 1px solid #2c323 cho mỗi item.

Kết quả thế này:

Như bạn thấy, các thành phần đã ở đúng vị trí của nó, nhưng header và background lại bị mất. Đó là do thuộc tính float của các thành phần bên trong header. Bạn chỉ cần sửa 1 chút phần .container bởi vì nó là phần tử cha của những phần tử đang được dùng float:

Mọi thứ lại hoạt động bình thường:

Giờ thêm stype cho menu:

Còn 1 điều cần lưu ý là font chữ, click vào text link để xem font chữ. Nhưng nếu trong máy bạn không có font chữ đấy thì sao? Đừng lo lắng, click vào đấy nó sẽ báo cho bạn là bạn đang thiếu font chữ gì, nhớ click nhiều chỗ trên design để xem luôn kiểu chữ và độ dày nhé:

Giờ vào trang Google fonts direction và tìm font đó:

chọn kiểu:

Giờ chỉ cần copy cái link này và dán vào trong <head>:

Giờ bạn có thể sử dụng font này trong file Css với thuộc tính font-family: 'Open Sans', sans-serif. Vì nó là font chính của trang nên có thể để luôn vào thẻ <body>:

Giờ refresh lại trình duyệt để thấy sự khác biệt. Được 1/3 rồi đấy, không khó nhỉ?

Thêm một chút hiệu ứng khi di chuột vào menu:

Giờ thêm icon cho các item trong menu bằng cách dùng pseudo-element:

Mỗi item trong menu thì lại có icon riêng, nên chúng ta cần tìm ra vị trí và size của từng icon, dễ nhất là dùng tool này. Upload ảnh lên, click vào icon, nó sẽ trả về size và vị trí của icon đó.

Copy các giá trị và dán vào file CSS:

Vậy là xong cái menu:

Tiếp tục với phần .hero. Thêm nội dung HTML trước:

Đo size và độ dày của text, lề và line height trong PTS. Tất cả text đều màu trắng và căn giữa nên có thể thêm color: #fff; text-align: center; vào .hero:

Giờ là cách tạo ra button. Mình đã tạo button bằng thẻ tag <a> với class chung là .btn, và class riêng cho 2 màu là .btn-green và .btn-blue cho mỗi màu.

Sử dụng border-radius để bo tròn góc và box-shadow để đổ bóng cho button.

Giờ đến phần footer. Thêm classs .column cho từng cột, mỗi cột thêm tiêu đề bằng thẻ <div> và danh sách các link.

Thêm margin phía trên và phía dưới footer và thêm style cho tiêu đề và danh sách:

  Tầm quan trọng của thiết kế trải nghiệm người dùng
  Thiết kế phông chữ và gửi nó lên Google Fonts trong 24 giờ


Còn phải thêm icon của các mạng xã hội. Bạn có thể cắt nó từ bức ảnh và dán vào code hoặc sử dụng background-image cho link, nhưng tiện nhất là dùng icon font. Để làm được điều này, sử dụng tool sau:

Chọn icon bạn cần, chọn size, màu sắc, link đến đâu. Tiếp theo click vào button socicon.zip để download file. Giờ bạn đã có 1 folder font mới trong project, giải nén chúng, sau đó copy HTML, dán vào ngay sau thẻ nav.footer-nav. Chỉnh lại size cho phù hợp với design trong .soc li a.

Bổ sung nốt phần copyright:

Phù, dài quá phải không, sắp xong rồi, chịu khó đọc tiếp nhé. Giờ ta sẽ bắt tay vào phần cuối cùng là phần nội dung chính của trang.

Nếu nhìn kĩ 3 khối này, sẽ thấy nó giống nhau, chỉ khác nội dung. Vì vậy chúng ta chỉ cần tạo 1 khối, thêm style cho nó, nhân nó lên và thêm nội dung cần thiết. Lưu các bức ảnh trong 3 khối dưới dạng jpg. Giờ, viết HTML và dán những bức ảnh vừa lưu vào. Tạo div.blocks và dán 3 khối div.block bên trong.

Một lần nữa, chúng ta thêm float: left để 3 khối xếp hàng ngang và nhớ thêm clearfix.

Đo độ rộng mỗi khối nhỏ là 351px và khoảng cách giữa các khối là 43px. Chúng ta sẽ set margin-left trừ khối đầu tiên.

Thêm border và margin phía ngoài các khối nhỏ, thông số cụ thể xem trong PTS, có một chút bo tròn nhỏ ở góc nên cần cả border-radius.

Gần xong, còn thiếu vài cái đường gạch ngang phía dưới mỗi khối:

Để thêm được cái này, ta lại sử dụng pseudo-selector :after và :before.

Giờ F5 và xem kết quả:

Đến khối tiếp theo, ở đây cũng có 3 phần, mỗi phần lại có 1 bức ảnh hình tròn cùng với tiêu đề và ngày. Làm tương tự giống như cái trên. Lấy bức ảnh từ pts và biến nó thành hình tròn bằng cách sử dụng border-radius: 50%. Ta sẽ gọi khối to nhất bên ngoài là div.news, mỗi khối bên trong là div.one, và nhớ đừng quên thêm clearfix.

Kết quả:

Còn khối cuối cùng ta sẽ dùng <ul> cho danh sách các ảnh và thẻ <div class="title">cho phần tiêu đề. Ở đây có 1 cái hiệu ứng là khi di vào ảnh nó sẽ hiện rõ ra, nhưng khi lưu ảnh bạn vẫn phải lưu độ trong suốt 100% nhé, ta sẽ dùng thuộc tính opacity cho cái này.

Vậy là xong rồi đó, giờ bạn đã biết cách chuyển từ file PSD thành HTML rồi chứ? Tất nhiên mỗi trang 1 kiểu, đây chỉ là 1 ví dụ rất nhỏ và đơn giản để bạn hiểu các bước cần thực hiện. Hy vọng bài viết sẽ giúp ích bạn phần nào, có thể down toàn bộ source code ở đây nhé.

Nguồn: https://thesiteslinger.com/blog/tutorial-how-to-code-your-psd-into-a-html-css-layout

Topdev via viblo

  Xu hướng thiết kế web mới nhất: Cố tình làm thật xấu!
  Tìm hiểu qua tâm lí học về màu sắc trong thiết kế web