Archive
Hiệu Ứng Ánh Sáng
Bài này hướng dẫn làm thế nào để tạo ra một hiệu ứng ánh sáng đẹp và kỳ diệu.
Bước 1
Tạo ra một radial gradient, đi từ một màu tím đến màu tía sẫm
Bước 3
Thêm dòng văn bản Sử dụng hiệu ứng Distort >Wave filter để tạo gợn sóng
Tạo 2 sọc văn bản
Bước 4
Quay và đặt chúng vào đúng vị trí (Ctrl + T)
Bước 5
Thêm một vài hiệu ứng sáng : Dùng những hiệu ứng khác nhau cho từng dòng, điểm khác biệt chính là sử dụng hiệu ứng Outer Glow phần phần hiểu chỉnh là COLOR DODGE..
Thay đổi giá trị của Spread, Size and Range
Bước 6
Nhóm 2 dòng văn bản thành một và dùng mặt nạ (mask) để tạo hiệu ứng như hình dưới.
Bước 7
Tạo ra nhóm văn bản khác sau đó sử dụng hiệu ứng gaussian blur, và cuối cùng là xóa những phần không cần thiết để đạt được hiệu quả như hình dưới đây.
Có cảm giác như vừa tạo hiệu ứng chuyển động cho văn bản.
Bước 8
Tạo Layer mới phía dưới văn bản, dùng Bursh – 100px tạo điểm trắng sáng.
Layer phải ở dưới text (văn bản), để hiệu ứng glow không tác động lên điểm trắng sáng
Bước 9
Tạo thêm hiệu ứng khói, bạn sử dụng Eraser tool để xóa điểm trắng và tạo cảm giác như hình dưới đây
Bước 10
Tạo vùng chọn với thông số Feather lớn hơn 20 sau đó dùng hiệu ứng render>clouds và giử phím command (mac), ctrl (win).
Bước 11
Tia sáng: dùng Brush để vẽ, bạn hãy tạo cảm giác chúng đang văng lên và phân tán ra ngoài. Sau đó, áp dụng Outer Glow và Inner Glow để tạo hiệu ứng.
Kết thúc
Với thao tác đơn giản, bạn đã tạo được một hiệu ứng kỳ diệu, bạn có thể pha trộn các màu sắc để tạo chiều sâu.
Toàn bộ bài học có thể hoàn tất trong 35 phút, Điều ghi nhớ ở đây là bạn đang tập sử dụng thuộc tính color dodge cho Layer và nhóm, Outer Glow và Inner Glow để tạo hiệu ứng ánh sáng.
Hướng Dẫn Thiết Kế Trang Web 2.0 trong Photoshop
Trong hướng dẫn này, bạn sẽ học từng bước, từng bước cách làm thế nào để tạo một layout web tuyệt đẹp và rõ ràng. Bạn sẽ sử dụng một số kỹ thuật từ cơ bản cho đến trung cấp để xây dựng “Web 2.0” kiểu dáng đẹp, sử dụng Grid System 960.
Đây là một series có hai phần sẽ trình bày cho bạn cách làm thế nào để tạo layout trong Photoshop, sau đó làm thế nào để chuyển đổi các tiêu chuẩn phù hợp với (X) HTML của thiết kế web.
Kết quả
Nhấp vào hình ảnh dưới đây sẽ đưa bạn đến Phiên bản đầy đủ của layout mà chúng tôi sẽ thiết kế trong hướng dẫn này.
Thiết lập document
1. Tạo một document mới trong Photoshop với kích thước 1200px x 1050px.
Creating the background (tạo background)
2. Bây giờ, chúng tôi sẽ tạo background. Chọn Gradient Tool (G). Hãy chắc chắn đó là bộ Linear Gradient. Thiết lập foreground color #a1e8fe và background color #59d3fa và tạo ra một gradient như dưới đây:
Đặt Grid System vào document
3. Trên một layer mới, tạo một grid rộng 960px gồm 12 thanh, mỗi thanh rộng 60px. Đặt mỗi thanh cách nhau 20px. Đặt grid này ở chính giữa của document. Các grids này nên dùng như bảng chỉ dẫn của bạn và nên nhớ rằng các yếu tố thiết kế của bạn không được vượt quá chiều rộng của grid này. Vào trang 960 Grid System site để biết thêm thông tin, hoặc download the Grid system here.
Tạo ra các container cho các logo và các navigation item
4. Bây giờ, chúng tôi sẽ tạo ra các container cho logo và các navigation item. Để tạo các container, sử dụng Rounded Rectangle Tool với Shape Layers đã được lựa chọn. Thiết lập bán kính 10px.
5. Tạo một hình chữ nhật tròn rộng 300px. Tạo một hình chữ nhật tròn thứ hai rộng 620px; chúng được đặt trên grid như sau:
6. Áp dụng các thiết lập Layer Style cho mỗi hình chữ nhật tròn:
Bây giờ hình chữ nhật tròn của bạn trông như thế này:
Thêm logo và text cho navigation
7. Để tạo các navigation items, sử dụng Type Tool (T). Sử dụng màu sắc #5f5f5f. Trong trường hợp này, tôi sử dụng font chữ Rockwell. Add các navigation items cho hình chữ nhật thứ hai và logo của công ty (hiện tại logo đang sử dụng chỉ là một cái tên hư cấu cho một tổ chức thiết kế).
Tạo các ký hiệu phân cách cho các navigation items
8. Trên một layer mới, hãy add một ký hiệu phân cách ở giữa mỗi một navigation item. Ở đây tôi thêm một line với color #dedede.
9. sao chép ký hiệu ngăn cách. Sử dụng Layer> Layer Style> Blending Options> Color Overlay và thay đổi màu của bản sao #ffffff. Di chuyển bản sao một pixel qua bên phải. Điều này sẽ tạo ra một hiệu ứng chạm khắc tinh tế.
Tạo header
10. Bây giờ hãy tạo header phía dưới logo và thanh navigation. Sử dụng Type Tool (T), và add khẩu hiệu công ty và một bài giới thiệu ngắn gọn phía dưới. Sau đó, hãy add một Drop Shadow nhẹ để làm cho kích thước của nó lớn hơn.
11. Để lấp đầy khoảng trống bên cạnh khẩu hiệu, add một hình ảnh của một máy tính hoặc một laptop. Bây giờ, đây là những gì bạn cần phải có:
Tạo một button tròn
12. Dưới đây là một bài giới thiệu ngắn gọn, với việc sử dụng Rounded Rectangle Tool, bán kính 28px 28px, tạo ra một button gọi là”Learn More“. Điều này là rất hữu ích nếu người dùng muốn tìm hiểu thêm về công ty của bạn, thông tin này được tiếp cận một cách dễ dàng.
Áp dụng một Gradient Overlay cho button bằng cách sử dụng các cách thiết lập ở trên với # 086da0 màu của bottom và #23a7ea.
Tạo một call-to-action box
13. Sử dụng Rounded Rectangle Tool một lần nữa với bán kính 16px, tạo ra một hình chữ nhật 300px. Vào Blending Options và add một Drop Shadow với các giá trị giống như Bước 6.
14. Chọn hình chữ nhật chúng tôi vừa tạo ra (Cmd / Ctrl + Click) và tạo một layer mới phía trên hình chữ nhật này. Add ánh sáng màu xanh (#96e3fc) để gradient trong suốt trên hình chữ nhật.
15. Di chuyển gradient pixel này lên. Có thể mất một phút nhưng đừng quan tâm đến điều đó. Bằng cách nào đó hãy làm cho nó trông khác biệt một chút.
Phác thảo một call-to-action button
16. Box này sẽ dùng như một call-to-action button. Điều này rất hữu ích nếu bạn muốn người dùng tìm kiếm thông tin quan trọng trên toàn bộ trang web của bạn chỉ trong nháy mắt. Hãy add heading, một vài mô tả, và một icon cho các button. Các icon nhỏ có thể mang lại sức hấp dẫn hơn cho thiết kế của bạn. Chúng cũng giúp người dùng nhanh chóng tìm thấy những gì họ đang tìm kiếm bởi vì các icon truyền đạt các messages đến người dùng.
Các awesome icons mà tôi đang sử dụng trong hướng dẫn này là từ Wilson Ink trên deviantART. Bạn có thể kiểm tra và download chúng; Bộ icon này được gọi là Green and Blue Icon Set. Các icon này chỉ miễn phí cho sử dụng cá nhân.
17. Sao chép cái box mà chúng tôi vừa tạo ra cùng với nội dung của nóhai lần, , sau đó sắp xếp chúng bằng nhau trên grid. Thay đổi nội dung của hai box mới.
18. Để add nội dung vào thiết kế, chúng ta có thể thêm một vài text dưới ba box này, ví dụ, một mục thư thông báo (newsletter) sẽ là tuyệt vời. Nhưng đừng quên giữ cho mọi thứ nằm bên trong grid!
Last but not least… the footer
19. Kế tiếp, chúng ta tạo footer, nơi có thể add bản quyền và các thông tin liên lạc cho trang web.
Icing on the cake: creating the diagonal lines
20. Tạo một document mới trong Photoshop với kích thước 25px x 25px và toàn bộ document với một black background(#000000).
21. Trên top của layer với black background, tạo một layer mới. Sử dụng Zoom Tool (Z), zoom trong document có kích thước tối đa. Thiết lập Pencil Tool: 1px và foreground color: màu trắng(#FFFFFF). Vẽ các line trên document của bạn giống như hình dưới đây. Hãy lưu ý bạn cần phải vẽ bao nhiêu pixel và vẽ chúng vào đâu trong các areas trên document.
Kết nối các lines như thế này:
Lấp kín các khu vực trống với màu trắng để đạt được kết quả này:
22. Ẩn layer này với black background và vào Edit> Define Pattern. Layer với black background chỉ được tạo ra để làm cho màu trắng dễ nhìn thấy hơn. Đặt tên brush của bạn ” diagonals ” và nhấn OK.
23. Bây giờ chúng ta quay trở lại mô hình chúng ta vừa tạo. Tạo một layer mới phía trên gradient background. Go to Edit> Fill và trên Contents dropdown, sử dụng Pattern. Click vào Custom Pattern và tìm (pattern) mô hình chúng ta vừa tạo ra có tên là “diagonals” và nhấn OK. Bạn sẽ thấy một cái gì đó như thế này:
24. Đặt Blend Mode của layer này lên Overlay và Opacity của nó là 4%
25. Sử dụng tẩy, xóa thông thường từ bottom lên top, xóa bỏ khoảng 60% các đường chéo để làm cho nó trông như thế này:
26. Voila! Chúng tôi đã có một Web 2.0, rất rõ ràng, và đẹp mắt!
hieuungphotoshop 