Hướng Dẫn Cắt Web Từ Photoshop Sang Html Css Như Thế Nào ? Hướng Dẫn Làm Bài Tập

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 đứa 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 để biến một file PSD thành giao diện web với HTML, CSS.

Bạn đang xem: Hướng dẫn cắt web từ photoshop sang 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 lẽ dĩ nhiên nhanh hơn nhiều, nhưng nếu CSS thuần bạn ngon 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ó:

html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}Giờ, bỏ các gạch chân ở thẻ , 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.

a { text-decoration: none;}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.

Xem thêm: (English) Dư Nợ Sao Kê Là Gì ? Hướng Dẫn Thanh Toán Dư Nợ Tín Dụng Hiệu Quả

*

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:

.container { width: 1140px; margin: 0 auto;}.header,.footer { background: #15181f url(../images/bg-texture.jpg) repeat; color: #fff;}.middle { background: #fff;}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

.hero { background: #333 url(../images/bg-hero.jpg) no-repeat 50% 50%; background-size: cover; height: 465px;}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:

header class=”header”> div class=”container”> div class=”logo”>img src=”https://otworzumysl.com/images/logo.png” height=”25″ width=”81″ alt=””>div> div class=”slogan”>your nice slogandiv> nav> ul class=”nav”> li class=”how-it-works”>a href=”#”>How it worksa>li> li class=”sign-up”>a href=”#”>Sign upa>li> li class=”login”>a href=”#”>Logina>li> ul> nav> div>header>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:

.logo { float: left; margin: 19px 17px 0 0;}Giờ đến slogan

*

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

.slogan { float: left; margin-top: 22px; font: italic 16px “Times New Roman”, Times, Georgia, serif; color: rgba(255, 255, 255, .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ẻ 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.

.nav { float: right;}.nav li { float: left; border-left: 1px solid #2c323d;}.nav a { display: block; line-height: 62px;}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

.container:after { content: “”; display: table; clear: both;}Mọi thứ lại hoạt động bình thường

*

Giờ thêm stype cho menu

.nav a { color: #fff; display: block; line-height: 62px; padding: 0 24px 0 53px;}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

html lang=”en”>head> meta charset=”utf-8″> title>Insighttitle> link href=”http://fonts.googleapis.com/css?family=Open+Sans:400,600,700″ rel=”stylesheet” type=”text/css”> link rel=”stylesheet” href=”https://otworzumysl.com/huong-dan-cat-web-tu-photoshop-sang-html-css//css/style.css”> 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 { font: 16px “Open Sans”, Arial, Helvetica, sans-serif; color: #55606e;}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

.nav a:hover { background-color: #13151a;}Giờ thêm icon cho các item trong menu bằng cách dùng pseudo-element

.nav a:after { content: “”; background: url(../images/nav-icons.png) no-repeat; position: absolute; top: 22px; left: 24px;}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

.nav .how-it-works a:after { background-position: 0 -1px; width: 19px; height: 18px;}.nav .sign-up a:after { background-position: -24px -1px; width: 19px; height: 18px;}.nav .login a:after { background-position: -47px -1px; width: 14px; height: 17px;}Vậy là xong cái menu

*

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

div class=”hero”> div class=”container”> h1>Don”t ignore your dreamsh1> p>strong>The 5 regretsstrong> paint a portrait of post-industrial man, who shrinks himself into a shape that fits his circumstances, then turns dutifully till he stops.p> a href=”#” class=”btn btn-green”>See how it worksa> a href=”#” class=”btn btn-blue”>Join usa> div>div>Đ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

.hero { background: #333 url(../images/bg-hero.jpg) no-repeat 50% 50%; background-size: cover; height: 465px; color: #fff; text-align: center; padding-top: 31px;}.hero h1 { font-size: 52px; font-weight: bold; margin: 0 0 30px;}.hero p { font-size: 22px; line-height: 36px; font-weight: 600; max-width: 715px; margin: 0 auto 51px;}.hero p strong { font-weight: 700;}

*

Giờ là cách tạo ra button. Mình đã tạo button bằng thẻ tag 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.

.btn { display: inline-block; border-radius: 4px; line-height: 50px; color: #fff; font-weight: 600; font-size: 18px; line-height: 50px; padding: 0 55px; margin: 0 11px;}.btn-green { background-color: #83c129; box-shadow: 0 4px 0 #518719;}.btn-blue { background-color: #068fd5; box-shadow: 0 4px 0 #046b9f;}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ẻ

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *