post image

Vertical Scrolling: Photoshop layout

Sau khi đã hoàn thành về series photoshop căn bản thì chúng ta sẽ bước qua những video hướng dẫn mới, với kỹ thuật cao hơn, không chỉ có thiết kế và còn cả lập trình nữa. Thông qua series này, mình sẽ hướng dẫn các bạn làm một website từ đầu tới cuối với phong cách Vertical Scrolling.

Trong bài đầu tiên thì chúng ta sẽ sử dụng photoshop để layout một website giả lập với tên là “Izwebz survey” nhằm khảo sát ý kiến người dùng. Ngoài các thao tác căn bản như đã học trong các bài trước, chúng ta sẽ tìm hiểu thêm về cách tạo texture cho website.
Phía dưới là hình demo website sau khi đã được tao ra với công cụ photoshop.

Demo izwebz survey

- Chú ý mã màu: Đỏ:e74c4a; Xanh:30adbf; Background:f7f7ef;

- Tham khảo thêm các cách khác tạo texture: Webdesign.tutsplus.com

Trong bài thứ 2 của series này thì chúng ta sẽ bắt tay vào chuyển từ photoshop sang HTML & CSS. Tuy nhiên, chúng ra sẽ sử dụng HTML5 và CSS3. Cái này mình sẽ nói rõ trong bài tiếp theo.

Giờ thì hãy thưởng thức thôi nào.

Thời lượng: 42 phút
File Size: 220 MB (168 Mb .7z)
Screen size: HD 720p
Download Mp4: Mediafire
Email: izwebz.art@gmail.com (Minh Mẫn)

«

»

  1. Daniel Nguyen says:

    Cho hỏi là width của cái layout trong PTS là bao nhiêu px vậy?

  2. Thanh rossi says:

    Cái sọc xanh ngang dọc để làm gì thế a ơi

  3. dragonvnit says:

    Muốn thanks các bác thật nhiều, tiếc là không có nút like :x cảm ơn admin nha’

  4. Trang says:

    Site này bạn có hướng dẫn làm trên WordPress ko? Mình rất thích WordPress.

  5. Đã update lại link nhé.
    Về quê vừa lên.

  6. Nhật Nam says:

    Ngồi hóng phần 2 HTML5

  7. Võ Xuân Anh says:

    Anh Mẫn ơi. Sao em download mà nó đòi key ha anh.
    Anh cho em key được không.????

  8. mrkyt says:

    Cảm ơn Võ Minh Mẫn về những tutorial, song cần trau chuốt và nâng cao chất lượng sản phẩm hơn nữa.

  1. BB
  2. BB
  3. BB

arrow

Lưu ý khi post comment:

  • Không "bóc tem" topic
  • Dùng lời lẽ có văn hoá và lịch sự
  • Xem trang FAQs trước khi hỏi
  • Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
  • Đặt code trong thẻ [php],[html],[javascript],[css]

Chọn kiểu gõ: Tự động TELEX VNI Tắt