Mình có tham gia vào 1 vài group liên quan đến web, gặp hơn mấy chục design với front-end dev ngoài đời, tất nhiên đều là người việt. Thì đa phần đều rất ít hoặc gần như ko có người nào tận dụng hoàn toàn hết tính năng của Photoshop (Ps) hay Illustrator (Ai) và các extension, script phụ trợ cả.

Do đó mình sẽ giới thiệu với các bạn những extension, script.. cũng như 1 số cách để tận dụng triệt để các tính năng của Ps trong việc thiết kế web và một chút về Ai (mình sẽ dành nó cho 1 bài viết khác).

Và nếu bạn biết bất cứ thứ gì có thể giúp hỗ trợ công việc design hãy chia sẽ với mình, mình luôn muốn cập nhật kĩ thuật để đẩy nhanh tiến độ công việc.

Mình sử dụng các phiên bản CS6 hoặc CC nhé. Tốt nhất nên dùng CC mới nhất.

1. Thiết lập

Nếu bạn chỉ sử dụng những thứ mặc định của photoshop cung cấp cho bạn thì thật là đáng tiếc, khi mà adobe cung cấp cho các soft của họ chế độ workspace để bạn có thể tùy chỉnh và tối ưu cho công việc của bạn.



Hãy thiết lập các tool mà bạn hay sử dụng nhất theo ý muốn của bạn.

Những tool ko có phím tắt nhưng bạn dùng thường xuyên thì tốt nhất hãy thiết lập phím tắt cho nó, cả khi phải hi sinh các phím tắt mà các tool bạn ít dùng cho công việc đang chiếm giữ.

Để thiết lập phím tắt, các bạn sử dụng đường dẫn :

• Edit>Keyboard Shortcuts…

Hoặc sử dụng tổ hợp phím tắt Alt + Shift + Ctrl + K:



Sau khi thiết lập xong, ưng ý rồi hãy lưu lại workspace của bạn bằng cách bấm theo hình trên cùng và chọn New Workspace… và đặt tên và check theo như bên dưới.



Thế là ko lo bị mất thiết lập cũ, làm cái khác thì tạo thiết lập khác, bấm chuyển qua lại. Đây là một trong những thứ là CC lưu trữ lại trên cloud.


2. Giới thiệu các tool Ps thường dùng cho design website/ui (mình hay dùng :lmao: )






Bộ tool này có 3 chế độ ở thanh setting tool – bên dưới menu



Là: Shape / Path / Pixel

Thì bạn nhớ, luôn là Shape. Nó giúp bạn tạo ra các đôi tượng như bên vector vậy, bạn thích co kéo nó to cỡ nào cũng được. Qua vài bước đơn giản bạn có thể tái tạo vector từ nó khi lôi vào Ai. Mình tạo các “thẻ div”, icon… trong Ps đều bằng shape. Lí do chính mà mình đồng ý làm việc web design trên Ps thay vì Ai.




Và quan trọng hơn, dùng nó để có thể quan sát ngay lập tức thông số, tùy chỉnh thông số chính xác đến từng pixel. Chưa kể các tool hỗ trợ xuất ra các thuộc tính CSS từ Ps, mà mình sẽ giới thiệu với các bạn ở phía sau đều hỗ trợ nó.

Nếu nhận được 1 file .psd web hiện thời mà toàn bộ đều là pixel mình sẽ remove luôn. Nếu bạn sử dụng CC thì quá tốt.



Ps CC cung cấp sức mạnh vượt trội cho web designer bằng cách buff cho shape.





Mình rất hay dùng nó để ghi chú mọi thứ trên file thiết kế khi gửi nó đi xa tới các front-end dev khó tính xD.




Nếu bạn ko xài nó thì đúng là một đáng tiếc, nó giúp bạn lưu trữ lại các thay đổi trong vị trí, thuộc tính của các đối tượng trong phiên làm việc 1 dạng backup tuyệt vời.




Điều hài là các front-end mình gặp rất hay ngồi ước lượng khoảng cách hoặc bật cái thanh ruler trên đầu lên rồi kéo lên xem, nhẩm ra khoảng cách các object :lol: Trong khi Ps cung cấp 1 cái tool cực tiện dụng, nhưng rất hiếm ai xài tới. Trong hình mình đã thiết đặt phím tắt N cho nó 




Cái này để tạo grid , tất nhiên phần sau sẽ giới thiệu 1 extension chuyên dụng hơn. Nhưng mình luôn tạo phím tắt cho cái này, vì đôi khi nó rất có ích :beauty:


Vậy từ đầu đến h, quan trọng nhất là phải nhớ các phím tắt cho công việc nhé. Ngồi bấm chuột lâu lắm 
Phần sau sẽ đến các extension ^^

Do mình sơ suất quên mất phần export của Photoshop (Ps) luôn >> mình tạm thời dời phần giới thiệu tool lại 1 chút nhé.

+Bonus: Xuất hình

Nếu như ở các phiên bản Ps trc đây mình thường dùng Slice tool (C)



Đặc điểm của tool này nhiều người tưởng kéo thành ô rồi dùng tiếp tool Crop tool để cắt :lmao:. Thực chất tool này phải sử dụng cùng với chế độ Save for web… (Alt + Ctrl + Shift + S) thì mới phát huy tác dụng. Thì hiệu quả của nó là giúp bạn xuất ra tất cả các thành phần được khoanh vùng bởi Slice trong 1 lần xuất duy nhất.

Ví dụ, mình có file psd như sau, đã dùng Slice khoanh vùng:



Tiếp tục dùng Slice Select Tool (C) nhấp vào các con số xanh 03, 05, 10 (nhấp nhẹ thôi) ở các vùng khoanh nhập tên vào phần name, đây là tên của thành phần sau khi xuất ra.

Mặc dù có slice background type cơ mà nếu bạn ko tắt layer background thì xuất ra là png, gif để transparent nó cũng ko hề transparent đâu : sosad:.



Kích hoạt Save for web… (Alt + Ctrl + Shift + S)



Ở đây, bạn bấm từng khu vực đã khoanh vùng rồi thiết lập thông số xuất ra. Sau khi xuất ra (nên để chế độ là Images only). Thì toàn bộ file sẽ nằm trong folder tên images



Bạn có thể thấy ngoài 3 khu vực đc khoanh vùng và đặt tên ban đầu thì tất cả các phân vùng rác khác nó cũng xuất luôn xD. Chưa kể vì mình ko tắt layer background nên file hình Pol.gif dù check transparent nhưng nó có nền trắng :lol:

Do đó mình đã bỏ cách này từ khá lâu rồi :v. Còn 1 cách khác khá hay là File>Script> Export layer to files…



Thì nó sẽ xuất toàn bộ các layer trong file psd ra thành các file hình, định dạng theo các bạn thiết lập, có trong suốt luôn.



Thằng này vì chỉ là 1 đoạn script do đó rất ngu, xuất cả text và các layer có thiết lập Blending option. Ví như mình thiết lập shadow cho cái hình tam giác thì nó sẽ ko tài nào xuất đc (nó cho thành thư mục images đó). Và nó chỉ xuất đc mỗi lần 1 loại định dạng. Cách đặt tên cho file thì quá tệ.


Do đó ở Ps CC đã cung cấp cho chúng ta 1 chế độ cực kì hay. Có thể làm tới đâu xuất đến đó, ko cần bấm xuất hay gì nữa. Nó nằm ở File>Generate>Image Assets

Chỉ cần kích hoạt, và thay đổi tên layer là nó sẽ tạo ra 1 thưc mục cùng chỗ với file psd và xuất file hình đó ra. Xuất đc cả group chứ đừng nói là layer.



Nó thiết lập đc cả thông số xuất ra, dù hơi hạn chế 1 chút. Chi tiết: http://helpx.adobe.com/photoshop/using/generate-assets-layers.html


+Bonus: Tô màu nhanh

Cách tô màu bất cứ layer nào dù là text hay shape, image… đó là tổ hợp phím Alt + Backspace (là nút thường dùng để xóa kí tự đứng phía trước ấy). Nó sẽ tô với màu nào thì các thím tự mò nha :brick:


+Bonus: Paragraph Style

Phần này mình ko tính nhét vào vì mình ko hay xài cho ui design lắm, chỉ xài khi edit truyện là nhiều thôi. Cơ mà có ng nhắc nên nhét vào luôn.



Cái tool này có tác dụng là lưu trữ lại các thiết lập của các đoạn text. Ví dụ mình setting như sau:



Thì khi mình tô đen hoặc chọn 1 layer text nào đó và áp chế vào lập tức toàn bộ sẽ chạy theo setting này. Và một khi mình thay đổi thiết lập của 1 paragraph style và lưu lại thì toàn bộ các đoạn text ảnh hưởng bởi nó cũng sẽ thay đổi theo.

À mà khuyên các bạn nào xài máy ko đc mạnh thì nhớ tắt chế độ preview đi nhé 

Thiết kế web là một phần quan trọng trong các chiến dịch digital marketing nói chung. Các nhà thiết kế, marketers cũng như khách hàng đều rất quan tâm đến những xu hướng thiết kế mới và hiệu quả, nhằm thu hút được nhiều nhất các đối tượng khách hàng mục tiêu của mình, cũng như loại bỏ những phong cách hay xu hướng cũ kỹ đã không còn phù hợp với sự thay đổi từng ngày của internet. Hãy cùng điểm qua những xu hướng thiết kế web trở nên lỗi thời trong năm 2014 theo tổng hợp từ trang Web Design Ledger.

Banner ở trang chủ (Homepage Sliding Banners)


Trong một thời gian dài slide banner hình ảnh ngay trang chủ website được xem là một ý tưởng tuyệt vời. Với thiết kế ấn tượng, những banner kiểu này được kỳ vọng mang lại cho người xem một lượng thông tin ban đầu phong phú với hình ảnh hấp dẫn đồng thời mang lại cảm giác như người dùng đang tương tác với website. Tuy nhiên, với trải nghiệm của đa số người dùng, họ lại cho rằng banner kiểu này khiến họ dễ mất tập trung. Người dùng hiện nay có xu hướng ưa thích những website có tính tương tác thật sự với thiết kế mang phong cách không quá lòe loẹt và cầu kỳ, có thể kể đến phong cách thiết kế cuộn chuột một trang (single-page scrolling) hay thiết kế menu drop-down đơn giản.

Mẫu form đòi hỏi quá nhiều thông tin. (Extensive Fill-Out Forms)


Thu thập thông tin cá nhân của khách hàng là một phần quan trọng trong hoạt động trực tuyến của doanh nghiệp, cho dù đó là một trang thương mại điện tử hay chỉ đơn giản là một trang blog cá nhân. Tuy nhiên, nỗi ám ảnh về việc những thông tin cá nhân của mình sẽ được sử dụng cho mục đích tiếp thị đã khiến người dùng có xu hướng bỏ qua hoặc lướt qua những form yêu cầu quá nhiều thông tin chi tiết của khách hàng như ví dụ ở trên. Việc hỏi hàng tá câu hỏi chỉ phù hợp với người dùng đã thật sự sẵn sàng trở thành khách hàng của doanh nghiệp và thật may mắn là chủ các doanh nghiệp cũng dần nhận ra xu hướng này bằng việc loại bỏ những form mẫu với quá nhiều thông tin.

Logo hình tròn với chữ viết tay (Circular Script Logos)


Sử dụng một font chữ viết tay bên trong một hình tròn từng là một cách thiết kế logo khá ấn tượng. Tuy nhiên cùng với việc quá nhiều người áp dụng kiểu thiết kế trên, từ những blog cá nhân cho đến cả những website của công ty chuyên nghiệp, đã khiến mọi người đã chán ngấy với phong cách này. Và có thể nói chắc chắn rằng, trong năm 2014, hấu hết mọi người sẽ tránh xa kiểu thiết kế logo như thế này.

Đoạn giới thiệu bằng flash. (Flash intro)


Giới thiệu website bằng flash từng là mốt thời thượng để thu hút sự chú ý của người dùng. Hiện nay, chúng ta vẫn có thể tìm thấy một vài đoạn flash mang tính phô trương khi truy cập một vài website vẫn chưa cập nhật các xu hướng thiết kế hiện đại, nhưng hầu hết mọi người đã dịch chuyển cảm hứng thiết kế sang phong cách mang tính đơn giản với các tính năng cụ thể hơn.

Quá nhiều Font chữ được sử dụng. (Too Many Fonts)


Mọi người đều biết rằng Typography là một thành phần quan trọng trong thiết kế website, tuy nhiên, việc sử dụng font chữ trên logo, website và danh thiếp một cách có chừng mực và vừa phải. Việc sử dụng quá nhiều font chữ khiến cho website trông giống như được thiết kế bởi một người không chuyên nghiệp. Ba là số lượng font nhiều nhất được cho phép sử dụng khi thiết kế một website.

Thiết kế phức tạp (Complicated Design)
Việc có thật nhiều icon, font chữ và tính năng có thể khiến một website thú vị và mang tính tương tác cao, nhưng nhìn tổng thể thì đây là website quá cầu kỳ và ngập tràn tính năng. Liệu điều đó có thật sự cần thiết? Xu hướng thiết kế ngày nay đang chuyển dịch dần đến những trải nghiệm đơn giản và thú vị hơn, thay vì khiến người dùng cảm thấy bối rối hoặc mất phương hướng trong quá trình duyệt web.

Mặc dù một số thiết kế đã từng rất phổ biến, nhưng cuối cùng đã chịu chung số phận với các phong cách khác: đi đến bão hòa, và điều đó thật sự khiến người dùng mệt mỏi và khó chịu. Hãy cẩn thận với những phong cách thiết kế bị thổi phồng trong năm 2014, vì biết đâu, chúng ta sẽ gặp lại những phong cách đó trong một danh sách như thế này vào năm 2015.

Các nhà thiết kế web đã có một năm tuyệt vời với rất nhiều ý tưởng cất cánh. Bên cạnh một số ý tưởng chợt loé lên rồi vụt tắt thì cũng có những ý tưởng tiếp tục tạo ra những ảnh hưởng của mình.
Xu hướng của năm 2014 là những gì đã gây được chú ý trong năm 2013 và hứa hẹn sẽ giữ được năng lượng để tạo ảnh hưởng khắp nơi.
Vậy chúng ta hãy điểm xem những gì đang được chú ý và sẽ gây ảnh hưởng trong năm nay. (click vào hình để tới liên kết ví dụ) 

1. Thiết kế phẳng vẫn sẽ phát triển mạnh mẽ.

Nếu bạn nghĩ nó chỉ làm một ham muốn nhất thời, có lẽ bạn cần suy nghĩ lại. Thiết kế phẳng được nói đi nói lại trong 3 năm trở lại đây, và chúng tôi dự đoán nó vẫn sẽ được nhắc tới trong vài năm tới.

Lý do để người dùng yêu mến thiết kế phẳng là sự nhã nhặn của nó. Chúng cung cấp thêm nhiều không gian, giảm thiểu lộn xộn, cung cấp trải nghiệm tổng thể tốt. Nó khiến người thiết kế phải suy nghĩ nhiều hơn về câu nói quen thuộc "Less Is More". 


2. Giao diện tuỳ biến là bắt buộc.

Không nghi ngờ, điều này hiện trở thành chuẩn mực. Khách hàng đề nghị kiểu thiết kế này, các nhà lập trình cũng dễ dàng chuẩn bị những gì cần thiết và tiến hành tạo sản phẩm. 

Lý do vô cùng đơn giản: Theo yêu cầu. Kể từ khi điện thoại thông minh và máy tính bảng thống trị thế giới kỹ thuật số, thì những công ty từ lớn tới nó đều mong muốn giao diện của mình có thể tuỳ biến để đáp ứng mọi đối tượng người dùng. 


3. Hình ảnh tiếp tục tốt hơn trên website

Có một thời gian, những hình ảnh chất lượng tốt chỉ là mơ ước, vì nó gây nhiều vấn đề về đường truyền. Năm 2014, với công nghệ tốt, hình ảnh chất lượng cao tiếp tục được người dùng và cả khách hàng mong muốn được nhìn thấy trên website của họ.


4. Paralalax website trở nên phổ biến.

Thiết kế Parallax đã đạt nhiều thành tựu bởi cách scrolling thú vị, với những hình ảnh bắt mắt, cách sử dụng nghệ thuật chữ sáng tạo và nổi bật. Bạn sẽ thấy càng nhiều hơn kiểu thiết kế này trong năm 2014, đặc biệt từ các thương hiệu lớn.


5. Inforgraphic tiếp tục là một phương thức tốt nhất để truyền tải thống kê.

Chúng có thể truyền tải nhiều thông điệp trong một không gian hạn chế, chúng bắt mắt và dễ nhớ. Đó là lý do nhiều khách hàng đề nghị cách hiển thị này. Những người dùng cũng thích inforgraphic vì họ có thể nhớ được nhiều thông tin bởi màu sắc, phông chữ sắp xếp khoa học.

6. Typography lấy chỗ ở trung tâm

Tạm biệt Geogria, Time News Roman, Arial và cả Helvetica! Hẳn bạn cũng dự đoán được điều này trong năm ngoái – khi Typography được nhắc đến trong thời gian qua.

Thực tế thì dù trong lĩnh vực thiết kế nào, typography vẫn được trân trọng, nhưng phải đợi công nghệ nhúng phông, và sự tham gia của google fonts khiến Typography được sử dụng dễ dàng, phổ biến. 


7. Website càng đơn giản và chỉ tập trung vào nội dung.

The New York Times gần đây đã tung ra giao diện mới tiếp cận với xu hướng đơn giản, cách tiếp cận sáng sủa, nhằm mục tiêu cung cấp cho người đọc một trải nghiệm dễ chịu.

Điều này sẽ trở nên phổ biến hơn với các trang web tin tức, khi mà ngay tại trang chủ có một lượng lớn thông tin được cung cấp, khiến người dùng cảm thấy rối mắt.

Bỏ đi những thứ rườm rà, cho phép nội dung thật sự dễ thấy và để chúng thực sự làm chủ trên trang là mục đích tối thượng. 


8. Những đoạn video giới thiệu ngắn tái xuất hiện

Chúng tôi cho rằng những đoạn video giới thiệu ngắn sẽ tái xuất hiện trong năm 2014 với sự bùng nổ của Vine. Những đoạn video chỉ với 6 giây tỏ ra hiệu quả, chúng dễ dàng khiến người dùng tập trung và thích thú.

Trong vài năm qua, chúng ta thường thấy những video giới thiệu ngắn hơn 30 giây nhằm tạo điểm nhấn – bây giờ chỉ có 6 giây, bạn cần suy nghĩ và sáng tạo nhiều hơn để sử dụng 6 giây này. Bạn có thể cám ơn và sử dụng Vine từ bây giờ. 


9. Thiết kế Newsletter càng ngày càng tuyệt hơn.

Email Marketing là một cách để truyền thông tin tới khách hàng, nhưng hiệu quả của nó chỉ ở mức nhất định trong những năm qua. Trong năm 2014, newsletter sẽ làm việc tốt hơn bởi sự sáng tạo và thú vị của nó.

Cũng thừa nhận là nó chỉ là một kênh tiếp cận, và sẽ vẫn được sử dụng bởi sự phù hợp với từng loại mô hình kinh doanh. 


10. Menu điều hướng cố định khiến người dùng lạc lối.

Hẳn là trải nghiệm phải lên header hoặc dưới footer mới có thể hướng qua các trang khác sẽ không còn tồn tại lâu nữa. Thanh điều hướng sẽ luôn xuất hiện trên trang khi bạn cần tới nó. Tất cả việc người thiết kế phải làm là để sẵn một vị trí cho thanh điều hướng luôn ở trên top (hoặc ẩn hiện khi rê chuột).

Do có mấy bạn có hỏi mình khi mà đăng chơi mấy cái MMO mà không biết rút tiền về đâu nên mình sẽ hướng dẫn những bạn nào chưa biết cách đăng ký và verify tài khoản Paypal. Cách làm thì rất đơn giản nhưng phức tạp ở chỗ là yêu cầu có thẻ Visa hoặc là thẻ Master Card thì mới Verify tài khoản được. Và trong thẻ phải có khoảng 2$ nhé. Nếu đầu tư lâu dài thì 2$ không là cái gì đúng không ạ. 

Và Cách làm các bạn xem clip sau rồi làm theo hướng dẫn nhé. Like – Ủng hộ clip tiếp theo nhé :v

Chúc các bạn đăng ký thành công tài khoản Paypal để chơi được nhiều cái online nhé 

http://www.iwebtool.com/google_banned?domain=myhoian.com
http://www.seomastering.com/google-banned.php
http://www.dennisnafisi.com/free-seo-tools/google-blacklist-checker/

Hiện nay trong ngành thiết kế webiste, khi thiết kế xong một trang web thường khách hàng sẽ yêu cầu gắn bản đồ trực tuyến của google vào trang web để có thể dễ dàng tìm đường đến địa chỉ của chủ website
Vì vậy những ai làm trong lĩnh vực thiết kế website này phải biết kỹ thuật chèn google map vào web. Để chèn google map vào website các bạn làm theo các bước như sau:

Đăng nhập vào http://maps.google.com/ bằng tài khoản tự đăng ký hoặc tài khoản gmail.

1. Sau khi đăng nhập bạn click vào "My places" - Ở cột bên trái.

2. Click nút "Create New Map" màu đỏ để tạo 1 vị trí bản đồ theo ý của bạn

3. Ở cột bên trái nhập vào: Title, ví dụ: Công Ty Thiết Kế Web MY HoiAn. Nhập mô tả cho vị trí này tại ổ Description (thường là mô tả dịch vụ).

4. Bên phải màn hình là phần bản đồ. Bạn di chuyển màn hình bản đồ đến vị trí bạn cần chú thích trên google map (Click biểu tượng bàn tay để di chuyển, kéo scroll chuột lên xuống để phóng to thu nhỏ).

5. Sau khi đã thấy được vị trí cần chú thích trên bản đồ, bạn click vào biểu tượng thứ 2 (hình giống giọt nước ngược, màu xanh, sát bên phải của biểu tượng bàn tay) di chuyển nó tới vị trí cần chú thích và click 1 cái.

6. Sau khi click bạn sẽ thấy nó hiện ra cửa sổ nhập thông tin. Bạn nhập như phần trên, hoặc theo ý bạn, có thông tin liên hệ...để người ta dễ tìm và liên hệ với bạn. Click OK sau khi nhập thông tin xong.

7. Phía cột bên trái click nút "Done" để hoàn thành việc chú thích bản đô

8. Click My Places để liệt kê các bản đồ đã chú thích.

9. Click vào tên bản đồ vừa tạo ra, nhìn phía trên cùng bên phải màn hình có biểu tượng hình mắc xích. Bạn click vào đó nó sẽ hiển thị ra 1 cửa sổ chứa thông tin để bạn lấy code nhúng vào website.

10. Tại dòng: "Paste HTML to embed in website" bạn copy nội dung trong ô màu xám.

11. Vào trang quản trị của web, bật bộ editor của bạn qua chế độ HTML mode và paste vào là.