1. Notepad++

Nếu bạn phải thường xuyên làm việc với nhiều ngôn ngữ lập trình khác nhau chẳng hạn ASP, PHP, Java, C#, Python, Jsp, … thì thay vì sử dụng nhiều trình soạn thảo, bạn có thể sử dụng một trình soạn thảo hổ trợ tất cả các ngôn ngữ này. Xin giới thiệu với bạn Notepad++ (không phải Notepad của Windows), một chương trình có thể đáp ứng được yêu cầu,hỗ trợ bạn soạn thảo các ngôn ngữ nói trên.

Chương trình này cũng có nhiều tính năng tương tự như Editplus nhưng có nhiều ưu điểm hay hơn như khả năng thu gọn mã: chương trình sẽ hiển thị dấu trừ (-) trước một khối mã, khi bạn bấm vào dấu trừ này, nó sẽ biến thành dấu cộng (+) và khối mã đó sẽ được thu gọn lại.

Ngoài ra, nếu cần gõ tiếng việt bạn chỉ việc vào Menu Fomat > Encode in UTF-8 là tiếng Việt sẽ hiển thị chính xác 100%.

Một điều khá thú vị là Notepad++ là một phần mềm mã nguồn mở, nếu thích và có hứng thú bạn hoàn toàn có thể hiệu chỉnh lại mã nguồn của nó để cá nhân hóa hay dựa trên đó viết ra một chương trình soạn thảo của bạn.

Download Notepad++ bản mới nhất tại đây: http://notepad-plus-plus.org/

2. Color Impact

3. FileZilla

4. Appserv

1. The Official WordPress Themes Directory
2. WordPress Themes Base
3. Top WP Themes
4. New WP Themes
5. eBlog Templates
6. Blog Oh Blog!
7. Free WP Themes
8. Siteground
9. i WordPress Themes
10. Fresheezy
11. Graph Paper Press
12. WP Templates
13. Free WordPress Themes
14. Templates Browser
15. Rock Kitty WordPress Themes
16. SkinPress
17. Free Theme Layouts
18. Design Disease
19. Arcsin WordPress Themes
20. Best WP Themes
21. WP Themes Free
22. ThemeLab
23. WOO Themes
24. Free WordPress Themes 4 You
25. Clone24
26. WordPress Templates
27. Wicked WordPress Themes
28. wpthemesfree.com
29. web2feel.com
30. blogohblog.com
31. wphacks.com
32. www.woothemes.com
33. studiopress.com
34. eblogtheme.com
35. topwpthemes.com
36. wpstyles.org
37. dreamtemplate.com
38. iloveyouwp.com
39. wparchive.com
40. boygj.com
41. freewordpressthemes4u.com
42. ezwpthemes.com
43. wp-style.com
44. themepix.com

Nếu các Theme miễn phí vẫn không làm bạn hài lòng, hãy để Seoweb24h thiết kế cho bạn 1 theme theo đúng yêu cầu với 1 quy trình chuyên nghiệp và giá cạnh tranh. Xin xem thêm về quy trình thiết kế website của Seoweb24h.

Nguồn: Seoweb24h sưu tầm và tổng hợp.

Khi thiết kế webiste bạn nên chú ý đến các nguyên tắc này để xây dựng thiết kế website hiệu quả và hoàn chỉnh hơn.

Khả năng điều hướng người dùng

Thiết kế website với bố cục được sắp xếp hợp lý và nổi bật tạo thu hút cho người tham quan website. Thường thì những sản phẩm chủ lực sẽ được thiết kế thật nổi bật tại trang web, đập vào mắt người xem khi lần đầu tiên vào truy cập vào trang website đó. Các thành phần còn lại được thiết kế và sắp xếp vị trí một cách hợp lý tạo tính thẩm mỹ cao cho website. Các thông tin rõ ràng cũng góp phần mang lại thành công lôi kéo người dùng dành thời gian xem các sản phẩm tại trang website.

Tạo nhất quán và xuyên suốt trong thiết kế để xây dựng thương hiệu

Chúng ta có thể xây dựng một website để người xem nhìn vào đó là họ nhận biết ra thương hiệu đó ngay. Chúng ta sẽ phối các màu sắc đồng nhất trên toàn trang website tạo cho người xem có cảm giác liên tục khi duyệt qua toàn bộ trang website của bạn. Phối màu sắc tương đồng với màu sắc logo tạo điểm nhấn để nhận biết thương hiệu cho trang web.

Sử dụng hình ảnh một cách hợp lý

Hình ảnh rất quan trọng trong thiết kế website, chúng ta phải sử dụng những hình ảnh tương đồng liên quan đến lĩnh vực nghành nghề mà ta cần quảng bá. Lựa cho những hình ảnh đẹp rõ nét, nó là một nhân tố quan trọng tạo nên sự nhận biết của người xem khi duyệt web.

Sử dụng Video

Một trang website đa phương tiện rất tốt trong việc quảng bá họ đến với người xem, tuy nhiên đừng để người xem quá tải với nó. Sắp xếp các video thích hợp, và nội dung truyền tải của video đó phải gần như liên quan đến sản phẩm hay dịch vụ mà mình đang quảng bá, người xem quan tâm thực sự đến sản phẩm và dịch vụ của website sẽ mong muốn xem trực tiếp các video đó trên trang website chứ không phải điều hướng đến trang khác. Các video phải thêm thông tin tóm tắt về sản phẩm và dịch vụ của họ.

Sử dụng Font chữ phù hợp

Tất cả các hình ảnh và video sẽ không giải cứu một trang website có kiểu chữ, hiệu ứng chữ gây khó khăn cho người đọc. Font chữ rất quan trọng dẫn dắt người xem trong website, khi thiết kế phải chú ý dùng font chữ và màu sắc, kích thước phù hợp với nội dung và bố cục web, những thông tin quan trọng thì dùng màu sắc nổi bật cho thông tin đó.

Nitrogen.

Bài này tôi sẽ hướng dẫn các bạn thiết kế hoàn chỉnh một trang Website Thương Mại Điện Tử đơn giản và để khởi đầu cho công việc kinh doanh của mình.

Tôi dùng phần mềm Adobe Photoshop 5. Các bạn có thể dùng CS3, CS4 cũng đều giống như nhau.

Trước mở một tài liệu mới từ Photoshop và chọn kích thước và các thông số như hình dưới:

Các bạn nên nhớ một điều quan trọng khi thiết kế hoàn chỉnh một Layout thì sẽ có rất nhiều layer được tạo ra, vì vậy các bạn nên tạo những danh mục liên quan và đặt tên cho nó để dễ quản lý khi chỉnh sửa giúp tiết kiệm thời gian.

Đầu tiên là tạo một một group mới trong bảng quản lý layer và đặt tên ví dụ tôi đặt cho nó là home sao đó trong Floder home tôi tiếp tục tạo những group khác để quản lý và làm việc từng group riêng biệt.

Đầu tiên chúng ta sẽ thiết kế các thành phần sau: Logo, Nút Shopping Cart, Các nút tiền tệ và chữ.

B1.Logo: công ty ta có thể dùng phần mềm vẽ logo như illustrator hoặc corel tạo làm logo khi làm xong ta sẽ xuất file hình ảnh để dùng cho Photoshop. Như hình bên dưới:

B2.Nút shopping Cart: cách làm nút shopping cart như sau, chọn công cụ Rectangle Tool (U) – tiếp tục chọn Rounded Rectangle tool trên thanh menu ngang cho Radius (độ bo góc) là 6 px – ta sẽ vẽ một khung hình chữ nhật trên mẫu thiết kế như hình:

Đổi màu lại cho khung Shopping Cart như sau: chọn lại công cụ Move Tool (V) sau đó click phải chuột vào Layer Shape mà ta mới vừa vẽ xong chọn Blending Options. Bảng Blending Options hiện ra ta click chọn vào Gradient Overlay và chọn lại màu cho khung Shopping Cart, các bạn có thể biến tấu cho màu sắc phù hợp với tiêu chí của mình.

Sau đó ta tiếp tục trở lại công cụ Rectangle Tool để vẽ hình chiếc xe đẩy, bạn chọn vào biểu tượng ngôi sao, chọn vào nút mũi tên xổ xuống chọn vào hình chiếc xe đẩy, sau đó vẽ lên trên khung Shopping cart, như hình bên dưới:

Tiếp tục chọn công cụ Text gõ chữ vào, vẽ một đường line với chiều ngang 1 pixed tô màu trắng và giảm Opacity còn 70%. Vậy là hoàn thành nút Shopping Cart.

B3.Nút tiền tệ và chữ đăng nhập: Tương tự như nút Shopping cart chúng ta sẽ vẽ tiếp ba nút tiền tệ. Và dùng công cụ Text để gõ các câu còn lại như hình bên dưới:

B4.Bây giờ chúng ta sẽ tiếp tục thực hiện menu ngang danh mục sản phẩm. Tạo Floder đặt tên là Menu sản phẩm sau đó tạo một layer mới trong Floder đó, sau đó tiếp tục chọn công cụ Rectangular Marquee Tool (M) vẽ một thanh menu như hình bên dưới:

Vẫn giữ nguyên vùng chọn ta tiếp tục chọn công cụ Gradient Tool (G), chọn màu sắc từ lại và sau đó giữ chuột drag một đường vào vùng chọn để tô màu cho đối tượng.

Sau khi tô màu xong ta sẽ làm hai viền cho thanh menu ngang này như sau: Click phải vào layer vừa mới tô màu chọn Blending Options – tiếp tục chon Stroke và chọn thông số như trong hình mẫu bên dưới ta sẽ có viền trên và dưới của thanh menu:

Tạo bóng mờ bên dưới thanh menu. Tạo một layer tên “bóng mờ” và cho nằm dưới layer thanh ngang menu, dùng công cụ Rectangular Marquee Tool vẽ một khung nhỏ hơn thanh menu, sau khi vẽ xong ta sẽ tiếp tục vào Menu Select – Modify – Feather (Shift + F6) thông số bằng 5 sau đó tô màu cho nó nên chọn màu xám đen, sau khi tô màu xong nếu vẫn còn thấy đậm thì ta có thể giảm Opacity để phù hợp với giao diện hơn:

Sau đó ta sẽ dùng công cụ Text để gõ vào danh mục menu ngang. Tiếp theo là tạo nút “Tìm kiếm”, dùng công cụ Rectangle Tool vẽ khung “tìm kiếm”, tô màu trắng, cho viền màu xám đậm như hình bên dưới:

B5. Tạo danh mục sản phẩm, tương tự như các bước trên tạo Floder đặt tên là “Danh mục sản phẩm” dùng công cụ Rectangle Tool (U) vẽ một khung hình chữ nhật vào tô màu cho nó, dùng công cụ Text để gõ vào danh mục sản phẩm, vẽ đường Line màu trắng (Opacity là 50%) sau đó Duplicate đường line đó lên thành 7 Layer và sắp xếp cho chúng đều nhau (xem hình mẫu), Tiếp tục dùng công cụ Rectangle Tool vẽ nút cho danh mục sản phẩm cũng Duplicate thành 7 Layer và sắp xếp những nút đó đều nhau ở trước tiêu đề sản phẩm, sau khi thực hiện xong các bước trên ta sẽ có Danh mục sản phẩm như hình bên dưới:

B6. Tạo một Slice sản phẩm mới. Dùng công cụ Rectangle Tool vẽ một khung slice lớn, sau đó chọn một hình mẫu đưa vào Layout. Sau đây tôi sẽ hướng dẫn các bạn tạo một Clipping Mask (có nghĩa đơn giản là tấm hình sẽ nằm bên trong khung chữ nhật mà ta vừa mới vẽ), Click phải vào layer “hình người mẫu” vừa đưa vào khung làm việc chọn Creater Clipping Mask, thế là hình đã nằm ở trong khung Slice. Tương tự ta sẽ thực hiện cho các Slice nhỏ còn lại, lưu ý các bạn có thể dùng công cụ Transform (Ctrl+T) để thu nhỏ hay phóng to hình ảnh, và khi hoàn thành sẽ như hình bên dưới:

B7. Tạo sản phẩm trong trang website, cũng tương tự như các bước trên chủ yếu dùng công cụ Rectangle Tool vẽ khung dùng Clipping Mask để lồng sản phẩm vào khung Shape đó, dùng công cụ text để gõ thêm thông số sản phẩm vào.

B8. Tạo các banner quảng cáo bên dưới Danh mục sản phẩm. Banner quảng cáo thì có thể là hình ảnh hoặc các đoạn Javacript hình ảnh, Banner Fash, sau khi lập trình hoàn tất trang website thì ta sẽ đưa lên sau, tuy nhiên chúng ta cũng thiết kế một banner ảnh demo cho đẹp về bố cụ và hoàn chỉnh một Layout. Làm banner cũng là kết hợp giữa vẽ khung, thêm hình ảnh, thêm câu chữ…

B9. Tạo Footer cho trang website, tạo floder mới đặt tên là Footer vẽ khung hình chữ nhật dùng Gradient tô màu chuyển sắc từ màu xám đậm (mã màu: b6b6b6) đến xám nhạt (mã màu: e4e4e4). Sau đó dùng công cụ text gõ các danh mục vào, Copy logo đổi thành màu xám (mã màu: 898989) đưa xuống góc phải, gõ vào dòng chữ Powered By OpenCart Sport © 2012. Thế là xong rồi đấy. Tác phẩm hoàn thành sau cùng

Download File Gốc: tại đây!

Lưu ý: Ta thấy trong khi thiết kế giao diện Website chúng ta sẽ dụng các công cụ vẽ khung, đường rất nhiều, như Rectangle Tool, Rectangular Marquee Tool, công cụ Text, Gradient, kết hợp màu sắc… đây là những kiến thức cơ bản trong Photoshop, các bạn chỉ cần nắm được kiến thức căn bản cùng với sự tìm tòi và sáng tạo thì chắc chắn các bạn sẽ có một thiết kế đẹp mắt. Điều quan trọng nhất sau khi đọc xong bài này là: HÃY MỞ PHOTOSHOP RA VÀ BẮT ĐẦU THIẾT KẾ NÀO! 

Nitrogen.

Trước khi bắt đầu thiết kế một layout cho website chúng ta phải phân tích kỹ lưỡng những vấn đề chính sau: về sản phẩm và dịch vụ mà website cần thiết kế hướng đến để có một thiết kế phù hợp, bố cục tổng toàn trang website phải hoài hòa đẹp mắt và phù hợp với tiêu chuẩn và thói quen của người xem, màu sắc phải được lựa chọn kỹ lưỡng ngoài yếu tố làm nổi bật cho webiste còn phải có sự kết hợp hài hòa giữa các màu trong toàn trang tránh làm rối mắt cho người xem, nên lựa chọn font chữ phù hợp để kết hợp có một website đẹp mắt. Phân tích các yếu tố quan trọng trước khi thiết kế layout cho website.

Bố cục rất quan trọng trong thiết kế website nó là bước đầu tiên cần làm trước khi thiết kế một website, khi thiết kế một website chúng ta phân tích sẽ làm gì cho website đó để đạt hiệu quả như mong muốn, lên bố cục tổng thể từng trang của website (Ví dụ: Trang chủ, Trang Giới thiệu, Trang sản phẩm, Trang Dịch vụ, Trang Liên hệ…), chúng ta phải tính toán sắp xếp các phần quan trọng như sản phẩm, dịch vụ ở các vị trí mà người dùng dễ nhìn nhất để thu hút người xem vào đó.

Sitemap: Lập một bản đồ site hoàn chỉnh cho toàn trang web, nó giúp cho thông tin về website trở nên rõ ràng, giảm thiểu thời gian làm việc và dễ thuyết phục người duyệt mẫu.

Bản thiết kế thô: chúng ta sẽ làm một bản thiết kế thô, bao gồm các vị trí của các thành phần trên website và bản thiết kế thô này cần phải được duyệt từ đối tác, khách hàng để từ đó tiến hành thiết kế layout hoàn chỉnh.

Về kích thước của trang web: Hiện nay hầu hết các người xem đều sử dụng chuẩn màn hình 1024 x 768 px hoặc cao hơn, tuy nhiên phần lớn mẫu thiết kế sử dụng kích thước thật của màn hình so với khung hình chuẩn của web theo chiều ngang là 1004px, một số trường hợp đặc biệt sẽ có thiết kế riêng biệt.

Sử dụng phần mềm để thiết kế website. Phần mềm chuyên dụng Adobe Photoshop là lựa chọn số một trong thiết kế đồ họa. Tuy nhiên để thiết kế một mẫu Layout chuyên nghiệp đẹp mắt ngoài các yếu tố về mỹ thuật, bạn cần phải có kiến thức tốt trong việc sử dụng các công cụ hỗ trợ của phần mềm Adobe Photoshop điều đó sẽ giúp bạn tiết kiệm được thời gian làm việc và hoàn chỉnh mẫu thiết kế như yêu cầu đề ra.

Sử dụng hệ màu chuẩn RGB cho web, vì chế độ màu sắc hiển thị trên màn hình là hệ màu chuẩn RGB.

Font chữ: nên sử dụng các font chữ chuẩn cho nội dung website (các font chữ hệ thống), vì nếu máy người xem không có font chữ mà website sử dụng thì sẽ làm hư toàn bộ layout. Khi sử dụng tiếng việt cho website nên dùng các font Unicode chuẩn như Times News Roman, Verdana, Tahoma, Arial…Font chữ phải có màu sắc hoài hòa với màu sắc của trang website, giúp cho ngươi xem dễ đọc chúng, tránh dùng những màu sắc có độ tương phản cao, làm mỏi mắt người xem khi đọc chúng. Khi thiết kế layout trong Photoshop nên để chế độ hiển thị Font chữ là None, tránh việc lựa chọn Crisp, Sharp, Strong, Smooth vì nếu sử dụng những lựa chọn này kết quả cuối cùng sẽ khác với thiết kế.

Đối với các website Thương mại điện tử nên hạn chế sử dụng đường cong, hình ảnh lớn, Background lớn chiếm dụng diện tích thông tin của website trừ khi chúng ta có thể quản lý được chúng. Và nó cũng làm chậm thời gian Load web (điều này rất quan trọng cho việc Seo Marketing Online). Ngoài ra việc sử dụng đường cong hay background cũng gây ra một số trở ngại khi chuyển sang HTML. Chúng ta cần nghĩ đến việc làm sao chuyển chúng thành HTML trước khi thiết kế một thành phần nào.

Sử dụng ngôn ngữ lập trình web: có thể sử dụng một số ngôn ngữ chuẩn hiện nay như ASP.NET, PHP, Drupal…

Về trình duyệt website: phải kiểm tra mẫu kết quả website trên các trình duyệt web phổ biến nhất hiện nay như: Internet Explorer, Firefox, Chrome… để phát hiện lỗi và chỉnh sửa cho phù hợp.

Nitrogen.