Học thiết kế web theo chuẩn. » Videos http://www.izwebz.com You aren't just a visitor Sat, 04 Feb 2012 12:43:17 +0000 en hourly 1 http://wordpress.org/?v=3.3 Vertical Scrolling: Slice & Code http://www.izwebz.com/video-tutorials/vertical-scrolling-slice-code/ http://www.izwebz.com/video-tutorials/vertical-scrolling-slice-code/#comments Sat, 04 Feb 2012 12:00:52 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=3304 Trong bài trước, chúng ta đã tao ra được giao diện website mang tên “Izwebz survey” bằng photoshop. Và bài tiếp theo ngày hôm nay thì chúng ta sẽ chuyển từ PSD>HTML với định dạng HTML5 & CSS3.

Chúng ta học gì trong bài này?

  • Công cụ slice trong photoshop
  • HTML 5 structure
  • CSS 3 selector

Hình minh họa cấu trúc của HTML 4 và HTML 5: Link

Trong video bài giảng mình sẽ nói rõ hơn về bảng cấu trúc này. Thôi, không dài dòng nữa, hãy xem video phía dưới để rõ hơn.

Thời lượng: 1 giờ 30 phút
Download định dạng .mp4 chất lượng cao MediaFire: Part 1 (190mb), Part 2 (118mb)
Screen size: HD 720p
Dung lượng: 358 MB
Example: Mediafire
Link youtube: http://www.youtube.com/watch?v=rUEoHYX2cUo
Link vimeo: http://vimeo.com/35047472
Email: izwebz.art@gmail.com (Minh Mẫn).
————————
Lưu ý ngoài lề: Mình là Minh Mẫn (MrV2m), một tác giả của izwebz và Minh Mẫn không phải là anh Demon Warlock, và cũng không có chuyện các bài viết của anh Demon Warlock bị chuyển sang tên Minh Mẫn (các bạn có thể bấm về các trang cũ hơn sẽ thấy “Page 4“, tên tác giả bài viết có cả DW, CS, Minh Mẫn, tanlevis, NickB).
Các bài viết gần đây có tên tác giả Minh Mẫn là do izwebz hiện chỉ còn mình viết bài, do các tác giả khác bận công việc cá nhân.
————————

]]> http://www.izwebz.com/video-tutorials/vertical-scrolling-slice-code/feed/ 8 Vertical Scrolling: Photoshop layout http://www.izwebz.com/video-tutorials/vertical-scrolling-photoshop-layout/ http://www.izwebz.com/video-tutorials/vertical-scrolling-photoshop-layout/#comments Fri, 27 Jan 2012 12:00:06 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=3296 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)

]]> http://www.izwebz.com/video-tutorials/vertical-scrolling-photoshop-layout/feed/ 7 [PHP]Quản Lý Thu Chi http://www.izwebz.com/video-tutorials/phptut-quan-ly-thu-chi/ http://www.izwebz.com/video-tutorials/phptut-quan-ly-thu-chi/#comments Thu, 03 Nov 2011 04:28:33 +0000 Clackken Smith http://www.izwebz.com/?p=3270 Có khá nhiều bạn cứ nghĩ rằng muốn làm một phần mềm quản lý về tài chính thì phải sử dụng các công cụ như Visual Basic hoặc các ngôn ngữ lập trình khác mới có thể làm được. Nhưng trên thực tế, với ngôn ngữ PHP bạn hoàn toàn có thể làm được điều này.

Bài này sẽ hướng dẫn các bạn cơ bản các bước để tạo một chương trình quản lý thu chi trên giao diện web.

Để nâng cao chất lượng về hình ảnh và âm thanh cho các Video Clip thì tôi xuất định dạng cho File là SWF để giữ tốt các hình ảnh của code.

- Lưu ý : Hiện tại tôi chưa thể liên lạc được với Demon Walock nên chưa thể có tài khoản Up lên host của Izwebz.com. Hiện tại tôi sẽ để Video tại hosting cá nhân của tôi và cho các bạn link để xem.
+ Trong quá trình xem, các bạn đừng nên sử dụng IDM hoặc Flashget để Download file này, vì làm như thế có thể sẽ ảnh hưởng đến hosting cá nhân về Băng thông..v…v. Tôi sẽ up file Video này lên Mediafire sớm nhất có thể và cập nhật link tại đây cho các bạn.
Thông tin liên hệ hỏi đáp :
Email : hoccode.php@gmail.com
Lưu ý : Không trả lời trên Yahoo chat hoặc email : clackken.smith@gmail.com

Phần I :
- Video : Phần I
- Smarty Libs : Smarty Libs

Phần II :
- Video : Phần II

Chú ý : Riêng phần III này mọi người xem bằng trình duyệt IE sẽ không bị tình trạng trắng xoá từ phút 12:36 nhé, chẳng hiểu là vì sao, còn file gốc thì không bị, có thể độ cache Video của Firefox và Chrome yếu chăng ?. ^^
Phần III :
- Video : Phần III
- PSD File : PSD File

Phần IV (Độ phân giải 1024 x 768):
- Video : Phần IV (Độ phân giải 1024 x 768)
CÁC PHẦN TIẾP THEO SẼ ĐƯỢC CẬP NHẬT THƯỜNG XUYÊN TẠI BÀI VIẾT NÀY

]]> http://www.izwebz.com/video-tutorials/phptut-quan-ly-thu-chi/feed/ 145 Photoshop action http://www.izwebz.com/video-tutorials/photoshop-action/ http://www.izwebz.com/video-tutorials/photoshop-action/#comments Tue, 30 Aug 2011 13:44:10 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=3208 Action rất quan trọng, nó giúp cho chúng ta tiết kiệm thời gian bằng cách lưu lại các hành động có xu hướng lập đi lập lại nhiều lần. Trong bài này mình sẽ hướng dẫn các bạn cách cài action cũng như cách tạo và chỉnh sữa.

Photoshop Action

Yêu cầu: Các kiến thức của các bài trước như Chỉnh sữa ảnh và blend màu, Smart object.

Thời lượng: 16 phút
File Size: 49 MB
Download Mp4: Mediafire

]]> http://www.izwebz.com/video-tutorials/photoshop-action/feed/ 17 Basic Ai: Bài 3 – Pen tools và Path http://www.izwebz.com/video-tutorials/basic-ai-bai-3-pen-tools-va-path/ http://www.izwebz.com/video-tutorials/basic-ai-bai-3-pen-tools-va-path/#comments Sun, 12 Jun 2011 14:00:45 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2961 Pen tool là bộ công cụ khá quan trọng trong cả photoshop và ai. Trong bài hôm nay mình sẽ hướng dẫn các bạn thao tác với bộ công cụ pen và dùng nhóm lệnh Object > Path để thao tác. Đây là bài căn bản để có thể vẽ các đối tượng phức tạp như hoa lá cây cỏ v.v…

Trong bài này chúng ta sẽ thông qua các vấn đề sau:

  • Giới thiệu và cấu tạo đường cong bezier
  • Dùng pen tool để vẽ lại trái tim
  • Sử dụng các chức năng trong Object > Path

Thời gian: 16:53 phút
Dung lượng: 38.3 Mb
Download: Mediafire
Bài tập: Download

Player
]]> http://www.izwebz.com/video-tutorials/basic-ai-bai-3-pen-tools-va-path/feed/ 17 Basic Ai: Bài2 – Thao tác đối tượng http://www.izwebz.com/video-tutorials/adobe-illustrator-thao-tac-doi-tuong/ http://www.izwebz.com/video-tutorials/adobe-illustrator-thao-tac-doi-tuong/#comments Mon, 30 May 2011 14:00:23 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2952 Trong bài trước, mình đã giới thiệu sơ lược về ai cs5, và cách vẽ các đối tượng cơ bản. Trong bài thứ 2 này trong series này, mình sẽ hướng dẫn các bạn sử dụng bộ công cụ select để thao tác trên các đối tượng cơ bản.

Trong bài này chúng ta sẽ làm việc với các vấn để sau:

  • Thao tác đối tượng
  • Sao chép đối tượng
  • Nhóm, khóa, tách đối tượng
  • Thay đổi thứ tự xếp chồng đối tượng
  • Canh hàng đối tượng

Bài này thì có các thao tác khá đơn giản nên chúng ta sẽ không có bài tập.

Thời gian: 9:41 phút
Dung lượng: 25.5 Mb
Download: Mediafire

Player
]]> http://www.izwebz.com/video-tutorials/adobe-illustrator-thao-tac-doi-tuong/feed/ 5 Adobe Illustrator CS5 – Giới thiệu http://www.izwebz.com/video-tutorials/adobe-illustrator-cs5-gioi-thieu/ http://www.izwebz.com/video-tutorials/adobe-illustrator-cs5-gioi-thieu/#comments Mon, 16 May 2011 13:00:33 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2806 Adobe Illustrator hay còn gọi là AI là một phầm mền tuyệt vời trong các ứng dụng đồ họa như in ấn và thiết kế các đối tượng cho website như icon, banner, background, v.v… Trong series này mình sẽ giới thiệu cho các bạn tổng quát về cách sử dụng AI.

Trong bài đầu tiên thì chúng ta sẽ làm việc với 3 vấn đề chính

  • Giới thiệu giao diện, thao tác File
  • Các công cụ cơ bản
  • Thao tác với layer

Cuối bài thì chúng ta sẽ ứng dụng để vẽ cờ của 2 quốc gia đó là Việt Nam và Anh.
Ngoài ra, để có thể giúp bạn thao tác nhanh chóng thì mình khuyên các bạn nên tự vẽ các lá cờ của những nước khác như: Mỹ, Brazil,… Nói chung là vẽ khoảng 200 lá cờ là nhắm mắt cũng biết công cụ đó nằm ở đâu. ^^~

Trong bài 2 chúng ta sẽ tìm hỉu về “Thao tác đối tượng”

Thời gian: 21:44 phút
Dung lượng: 43,4 Mb
Download: Mediafire
Bài tập: http://bit.ly/national-flag (tìm với google và down về nhá)

Player
]]> http://www.izwebz.com/video-tutorials/adobe-illustrator-cs5-gioi-thieu/feed/ 22 Basic photoshop: Căn bản về Smart Object http://www.izwebz.com/video-tutorials/photoshop-video-tutorials/basic-photoshop-can-ban-ve-smart-object/ http://www.izwebz.com/video-tutorials/photoshop-video-tutorials/basic-photoshop-can-ban-ve-smart-object/#comments Tue, 10 May 2011 14:00:07 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2886 Smart Object có mặt từ rất sớm, phiên bản PTS CS3, nhờ tính tiện dụng nên nó được kế thừa và phát triển tới phiên bạn CS5. Tuy nhiên, hiện nay vẫn còn ít người hiểu sai lầm hoặc sử dụng nó chưa hết 100%. Trong tutorial này mình sẽ hướng dẫn các bạn hiểu 1 cách thấu đáo về Smart Object.


Định nghĩa:

Smart Object là đối tượng thông minh, nó chứa bên trong nội dung gốc của các layer, hình ảnh, vector. Nó cho phép bạn thực hiện chỉnh sửa không ảnh hưởng tới layer, hình ảnh, vector gốc.

Smart Object
Bạn có thể:

  • Sử dụng công cụ Transform (scale, rotate, skew, wrap,…) mà không làm mất, ảnh hưởng tới dữ liệu gốc nằm bên trong (hình ảnh, vector, layer).
  • Sử dụng bộ lộc filter mà ko làm thay đổi ảnh gốc.
  • Là mặt nạ thông mình ko sử dụng các bộ lộc filler.
  • Tự động cập nhật cho tất cả các Smart object dùng chung 1 layer ,hình, vector gốc.

Bạn không thể:

  • Vẽ trực tiếp lên Smart Object mà phải thực hiện trong layer, hình, vector gốc.

Thời lượng:12:45 phút
Link download định dạng .MP4 chất lượng cao: MediaFire
File Size: 96MB .7z (Video + Bài tập)

]]> http://www.izwebz.com/video-tutorials/photoshop-video-tutorials/basic-photoshop-can-ban-ve-smart-object/feed/ 13 Custome Style với PHP và CSS http://www.izwebz.com/video-tutorials/php-video-tutorials/custome-style-v%e1%bb%9bi-php-va-css/ http://www.izwebz.com/video-tutorials/php-video-tutorials/custome-style-v%e1%bb%9bi-php-va-css/#comments Mon, 07 Feb 2011 15:15:00 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2761 Chà, nghe cái tiêu đề lạ quá phải không các bạn. Thực ra thì cũng đơn giản thôi, mục tiêu của bài này là chúng ta dùng PHP để thay đổi các giá trị như chiều dài, rộng, màu sắc, v.v… nói chung là thuộc tính của file CSS. Trong bài này thì mình sẽ hướng dẫn các bạn cách thay đổi background theo thời gian, hoặc ngẫu nhiên.

Yêu cầu:
- Biết căn bản PHP: array(), if…elseif…else, POST
- Cần tìm hiểu các hàm: date(), header
Sau khi đã có kiền thức căn bản thì chúng ta hãy cũng xem video phía dưới.

Thời lượng: 16 phút
Download định dạng .mp4 chất lượng cao : MediaFire
Dung lượng: 32,6 MB

]]> http://www.izwebz.com/video-tutorials/php-video-tutorials/custome-style-v%e1%bb%9bi-php-va-css/feed/ 32 Photoshop Basic: Phím tắt, Lens Flare vs Knoll Light Factory http://www.izwebz.com/video-tutorials/photoshop-video-tutorials/photoshop-basic-phim-tat-lens-flare-vs-knoll-light-factory/ http://www.izwebz.com/video-tutorials/photoshop-video-tutorials/photoshop-basic-phim-tat-lens-flare-vs-knoll-light-factory/#comments Fri, 04 Feb 2011 01:27:16 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2751 Đây là bài cuối cùng trong series về Photoshop căn bản. Trong bài này mình sẽ nói về shortcut (phím tắt), cách học và dùng phím tắt. Kèm theo đó là 3 e-book về phím tắt do Adobe phát hành tương ứng với các phiên bản CS3, CS4 và CS5. Đồng thời trong bài này mình sẽ nói thêm về filter Lens Flare của PTS và bộ plug-in rất hay về ánh sáng của Red Gaint Software đó là Knoll Light Factory. Trong bài này mình cũng chỉ cho các bạn các cách reflection trong photoshop.

Knoll Light Factory

Kết quả sau khi hoàn thành

Kết thúc series về PTS căn bản thì mình hi vọng rằng có thể giúp được ít nhiều cho các bạn trong thao tác của các bài PTS nâng cao như của anh DW và NickB.
Cảm ơn bà con đã ủng hộ trong thời gian qua!!!

Thời lượng:29 phút
File size: 54.2 Mb
Download định dạng .MP4 chất lượng cao: Download
Các phần khác:

]]> http://www.izwebz.com/video-tutorials/photoshop-video-tutorials/photoshop-basic-phim-tat-lens-flare-vs-knoll-light-factory/feed/ 18