Vertical Scrolling: Photoshop layout

#Võ Minh Mẫn

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.

#Võ Minh Mẫn

Nghề chính là chém gió, quăng bom và ném lựu đạn. Nghề phụ là cắt cỏ, chém chuối, cưa cây......

# gửi LỬA

Hãy giúp cho tác giả thêm máu lửa và cảm hứng khi sáng tác với 20k

# thảo luận

Muốn giỏi phải học, muốn học thì phải hỏi. Do đó, trong quá trình học hỏi và nghiên cứu, bạn sẽ luôn có những thắc mắc. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời thích hợp. Bạn có thể thảo luận ngay trong topic này, hoặc tham gia vào cộng đồng Izwebz Group trên Facebook, hay có thể gửi thư riêng cho tác giả “Võ Minh Mẫn”.

  • Quy Tran

    Bài thứ nhất “Dùng photoshop để tạo ra layout giả lập” này em tìm hoài không thấy link nhĩ

  • http://www.facebook.com/dplee.it Hòađp Lee

    Anh ơi, có hướng dẫn làm web horizonal layout không anh! ^^

    • http://www.facebook.com/vo.minh.man Võ Minh Mẫn

      Cái đó thì chắc em phải tự tu duy rồi :)

  • luffysama

    Bạn ơi Link die rùi nè, upload lại giúp mình được không :D

    • http://minhman.me Võ Minh Mẫn

      Youtube có bản HD đó bạn download về đỡ, để mình upload lại MF nhé.
      Thanks!

  • http://www.izwebz.com/video-tutorials/vertical-scrolling-photoshop-layout/ kameka

    anh black thuyết minh ngoài lề nhiều quá. kiểu dạy thêm kiếm tiền câu giờ, nói chung là viết văn lủng củng ,thừa nhiều, cần xem sét

    • demon_light

      ngon thì lên làm tus dạy xem??? — sau nói gì thì nhẹ nhàng cho dễ nge một chút!
      Công anh Minh Mẫn bỏ ra làm cái tus này ko nhiều thì cũng là ít. Nên Thaks ! anh đã hướng dẫn mới phải !!!

  • lanhvt88

    Thank for sharing :D

  • http://gamesieuhot.com gamesieuhot

    đang học web mà pts ni thì gà hic
    logo site mình làm cũng chưa xong
    http://gamesieuhot.com
    thank anh

  • gaga

    cám ơn anh rất nhiều

  • ChuBin

    tutorial nay hay wa..! thank anh nhiều :D:D

  • Ngô yến

    Thanks anh Minh Mẫn nhiều

  • http://xemboi.seo1k.net xem boi

    mình thấy anh Mẫn làm như vậy là được chỉ cần hướng dẫn như vậy là đủ vì làm video rất tốn thời gian mà anh.

  • http://forum.szone.vn Lê Hoàng Nhất Kha

    lâu lắm rồi mới thấy izweb có tut mới thật là thích quá đi :x

  • Daniel Nguyen

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

    • http://minhman.me Võ Minh Mẫn

      Mình để width là 1280px đó bạn.

  • http://tuoitretamdao.net Thanh rossi

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

  • http://anhemcorp.com dragonvnit

    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’

  • Trang

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

  • http://minhman.me Võ Minh Mẫn

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

  • Nhật Nam

    Ngồi hóng phần 2 HTML5

  • Võ Xuân Anh

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

  • http://butchi.blog.com mrkyt

    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.

#