Tập tin và thư mục Cấu trúc
OK, bước đầu tiên là tạo ra các tập tin và thư mục chúng ta cần. Những hình ảnh dưới đây cho thấy cấu trúc thư mục gốc của chúng tôi.
Như bạn có thể thấy, chúng ta có một rất dễ dàng thiết lập ở đây. Bên trong thư mục "css" đi trước và tạo ra một tập tin và styles.scss Cũng lấy một bản sao của normalize.css. Để sử dụng Sass Trong dự án này, bạn sẽ cần Hoặc Sass cài đặt trên máy tính của bạn hoặc bạn sẽ cần một ứng dụng để làm ngắm và biên dịch cho bạn. Tôi hiện đang sử dụng CodeKit cho Mac, nhưng có rất nhiều lựa chọn thay thế: chẳng hạn như Prepos, Hướng đạo, và Koala đến tên một vài. Họ không phải là tất cả miễn phí, nhưng bất cứ một bạn chọn sẽ giúp bạn tiết kiệm rất nhiều thời gian!
Bên trong "js" thư mục tạo ra một tập tin gọi là app.js và tải về một bản sao của modernizr.js đặt ở đây là tốt. Các Modernizr xây dựng Tôi đã sử dụng CSS3 và HTML5 bao gồm tất cả các bài kiểm tra như should chúng tôi cần nhiều hơn thế. Phải, đó bao gồm các tập tin và thư mục ban đầu của chúng tôi. Bước tiếp theo là kiểm tra thiết kế PSD của chúng tôi để xem nào bit cần cắt ra.
Cắt PSD
Các thiết kế của trang này là thẳng về phía trước đó làm cho công việc của chúng tôi quyết định nếu cần bất kỳ lát dễ dàng hơn. Tomas đã thực sự cung cấp tất cả tài sản của Những Cùng với các dịch vụ công, do đó, nó sẽ có thể không có lát ở tất cả từ thiết kế này. Tuy nhiên, với hướng dẫn này tôi Quyết định chúng ta nên cắt ra danh mục đầu tư ba hình ảnh và biểu tượng tải ở dưới cùng của trang. Đây chỉ là để dễ dàng hơn bất cứ điều gì khác, vì vậy chúng tôi không 't phải làm bất cứ thay đổi kích thước trong Photoshop.
Trong Photoshop Cẩn thận lấy công cụ và đề ra các lát cắt. Bạn có thể đặt tên cho từng slice bằng cách nhấp đúp vào nó. Sau đó sử dụng Save for Web ... (hoặc một mục trình đơn tương tự Tùy thuộc vào phiên bản của Photoshop) để xuất khẩu các hình ảnh lát vào thư mục của chúng tôi.
Sau đó tôi tạo một thư mục mới "hình ảnh" bên trong gọi là "danh mục đầu tư" đó sẽ tổ chức các hình ảnh liên quan đến các mục danh mục đầu tư. Di chuyển các hình ảnh ba danh mục đầu tư vào thư mục này và đó hoàn thành quá trình cắt của chúng tôi!
Avatar Image
Bây giờ đi qua uifaces.com và chọn một trong các hình ảnh để sử dụng như là hình ảnh hồ sơ cá nhân của chúng tôi. Tôi quản lý để tìm thấy cùng một là thiết kế nhưng nó không quan trọng những người mà bạn chọn. Lấy phiên bản 128x128 và bật nó trong "hình ảnh" thư mục.
Chúng tôi đang Gần Xong Với hình ảnh của chúng tôi chỉ với những phương tiện truyền thông xã hội và các biểu tượng điều hướng để sắp xếp ra. Chúng tôi sẽ làm điều đó sau.
sprites
Khi bạn có các nhóm hình ảnh như biểu tượng đó là một ý tưởng tốt để tạo ra một hình ảnh có chứa đựng tất cả chúng trong một mô hình lưới. Chúng được gọi là Sprites. Bạn có thể lấy này đến thái cực và tạo ra một tập tin lớn của tất cả các hình ảnh duy nhất trên trang web của bạn, nhưng đối với hướng dẫn này chúng ta sẽ tạo ra hai mảng đồ họa, một phiên bản tương ứng cho mỗi võng mạc.
Vì vậy, bằng cách sử dụng các liên kết được cung cấp bởi Tomas tài sản, chúng ta có thể tải về các biểu tượng phương tiện truyền thông xã hội. Lấy phiên bản 128x128 điểm ảnh của mỗi vì vậy chúng tôi có thể mở rộng xuống các kích thước chúng ta cần. Sau đó, trong Photoshop chúng ta cần phải tạo ra một tập tin là 101px bởi 51px đó. Kéo các biểu tượng phương tiện truyền thông xã hội vào tập tin này và thay đổi kích thước để 24px bởi 24px xuống. Các biểu tượng có màu đen, nhưng chúng tôi cần họ có màu trắng, vì vậy áp dụng một phong cách layer với nhau Một Đó Cung cấp cho một lớp phủ màu trắng. Thay đổi màu nền của bạn để một cái gì đó đen tối vì vậy chúng tôi có thể nhìn thấy chúng và sau đó sắp xếp chúng như vậy ...
Mỗi biểu tượng là chính xác 1 điểm ảnh từ các cạnh và với nhau. Thiết kế web tại TpHCM cũng thay đổi độ trong suốt của từng biểu tượng 80%. Bây giờ lặp lại hàng này của các biểu tượng và đặt nó trực tiếp bên dưới làm cho chắc chắn để giữ cho nó 1 điểm ảnh từ các cạnh. Thay đổi độ mờ đục của hàng thứ hai của biểu tượng 100%. Nó nên giống như thế này ...
Xem tiếp phần 2: tại đây.
Đăng nhận xét