# 005 - Photoshopping Mobile, Phần 1 - Thủ thuật CSS

Anonim

Chúng tôi bắt đầu với tệp Photoshop của chúng tôi đang mở. Ảnh chụp màn hình iPhone “kéo dài” trông khá ngớ ngẩn, chỉ đơn giản là cung cấp cho chúng ta một bức tranh trong bối cảnh đầu tiên trên thiết bị di động.

Chúng tôi bắt đầu đơn giản nhất có thể: với tên của Jeff. Chúng ta cần chọn một phông chữ ngay lập tức. Điều này có thể rất khó khăn. Chúng tôi có một phông chữ kế thừa để xử lý (phông chữ được sử dụng trên trang web cuối cùng) và thương hiệu và tính cách của Jeff để xem xét. Phông chữ có thể mang lại rất nhiều cá tính cùng với chúng. Chúng tôi xem xét một số phông chữ có quá nhiều cá tính (nó sẽ chống lại phong cách của Jeff). Chúng tôi nhìn vào phông chữ cũ. Sau đó, chúng tôi giải quyết trên Proxima Nova, vì nó chia sẻ nhiều đặc điểm với phông chữ cũ mà không truyền đạt quá nhiều cá tính. Nó chỉ sạch sẽ một cách đơn giản. Các đường nét tạo nên các chữ cái rất giống với các đường nét trong tác phẩm của Jeff. Quan trọng hơn, chúng tôi biết chúng tôi cũng có thể sử dụng Proxima Nova trên web.

Ngay bên dưới tên của Jeff, chúng ta cùng xem một số bức ảnh về công việc của Jeff. Đó có lẽ là điều quan trọng nhất mà chúng tôi làm trên trang web này. Nó cần phải rõ ràng một cách đau đớn những gì Jeff tạo ra. Một hình ảnh sẽ ở phía trước và trung tâm. Sau đó, chúng tôi sẽ đặt hai bức ảnh khác, nhưng lệch ra các cạnh để chúng chỉ đạt đến đỉnh. Cuối cùng, chúng tôi sẽ tạo một thanh trượt ở đây và những ảnh có đỉnh này làm cho nó rất rõ ràng, bạn có thể trượt hình ảnh trung tâm qua để hiển thị hình ảnh trên các cạnh. Không cần giải thích. Di động đầu tiên! Các quyết định thiết kế mà chúng tôi đưa ra ở đây sẽ thông báo hành vi của thanh trượt sau này.