Trước khi đến với hướng dẫn mới mình nghĩ các bạn nên xem lại một lần nữa bài viết Hướng dẫn thiết kế layout web thật phong cách với photoshop để nhớ lại những kiến thức đã có ở bài trước để bài này bạn sẽ thấy nó đơn giản hơn nhưng cũng có nhiều điều thú vị và mới mẻ không kém. Nào, chúng ta bắt đầu nhé…….
Bước 1: Tạo file mới với kích thước 1000x800px, độ phân giải 72dpi. Tạo layer mới đặt tên là “Background”, tô màu đen.
Bước 2: Tiếp tục tạo layer mới, đặt tên “brush_bg”, chọn công cụ Brush, giảm oapacity xuống còn 20%, vẽ một điểm màu đỏ, sau đó giảm kích thước cọ để thêm một số điểm màu xanh lá cây.
Bước 3: Tạo một file mới với kích thước 3x3px /72dpi. Sử dụng Pencil tool (B), brush 1px, màu đen, vẽ chữ thập như bên dưới, nhớ là bạn phải loại bỏ nền nhé.
Sau khi vẽ xong bạn vào Edit>Define pattern
Tiếp tục, tạo layer mới và áp patter này vào bằng cách chọn menu Edit>Fill, và chọn patter vừa lưu
Bước 4: Chọn công cụ Rounded Rectangle Tool (U) (radius 10 px), vẽ một hình chữ nhật đại diện cho thân trang web là nơi chứa nội dung website (main body)
Sau đó áp dụng một vài hiệu ứng như sau
Outer glow:
Inner glow:
Gradient overlay:
Bước 5: Nhân đôi layer ở bước 4, xóa layer style của nó đi, chọn công cụ Convert Point Tool và Direct Selection Tool (A) để thay đổi các góc trên bên phải và góc thấp nhất bên trái
Bước 6: Áp dụng dụng lại hiệu ứng hiệu ứng Gradient Overlay
Bước 7: Đến đây chúng ta sẽ thiết lập các thông số cho chữ
Chữ đậm PORTFOLIO (tiêu đề)
Chữ thường (nội dung)
Bước 8: Bây giờ chúng ta sẽ đăt một vài hình ảnh bên phải của trang web
Và cho chúng đường viền như sau
Bước 9: Tiếp tục, tạo cho chúng các thanh cuộn và mũi tên di chuyển lên, xuống. Sử dụng Custom Shape Tool (U) để vẽ hình mũi tên và dùng Free Transform thay đổi
Sau đó cho chúng hiệu ứng Gradient Overlay:
Bước 10: Nhân đôi layer ở bước 9, dùng Ctrl + T để lật ngược mũi tên theo chiều ngươc lại và di chuyển xuống dưới
Bước 11: Dùng Rounded Rectangle Tool (U) (radius of 10 px), vẽ một hình chữ nhật để làm thanh cuộn
Cho nó hiệu ứng Inner glow:
Gradient Overlay:
Bước 12: Dùng Ellipse Tool (U) Để vẽ một nút tròn đại diện cho nút Close của website
Sau đó cho một vài hiệu ứng như sau
Drop shadow:
Inner shadow:
Outer glow:
Inner Glow:
Gradient Overlay:
Chèn thêm dấu X bằng ký tự “X”, với thông số character như sau:
Bước 13: Tiếp tục tạo một dấu X khác với các thông số trong bảng character như hình
và đặt chúng tương tự như hình dưới
Sau đó, áp dụng hiệu ứng Inner shadow:
Bước 14: Bây giờ, bạn dùng Rounded Rectangle Tool (U) (radius: 20 px) để vẽ một button đại diện cho menu của web
và áp dụng hiệu ứng Gradient overlay:
Bước 15: Nhân đôi layer button trên (Nhấn Ctrl + J, 3 lần), sử dụng Ctrl + T và bố trí chúng như hình dưới
Bước 16: Bạn thiết lập thông số cho chữ và viết tiêu đề cho các menu tương ứng với web của mình
Tiếp tục, tạo hiệu ứng Drop shadow cho chữ như sau ( bạn chỉ cần tạo hiệu ứng cho một tiêu đề rồi sau đó copy layer style và pass vào các tiêu đề khác)
Bước 17: Bước cuối cùng là bạn cần gắn kết logo của web vào nữa là xong
Nếu không có khả năng tự mình thiết kế logo đẹp, lạ và độc thì bạn có thể sử dụng chữ làm logo cũng hiệu quả không kém.
Trong trường hợp này để cho đơn giản mình dùng dùng chữ làm logo và với các thiết lập như sau:
Thêm một số hiệu ứng Drop shadow:
Inner shadow:
Gradient Overlay:
Đến đây chúng ta đã hoàn tất việc design một trang web về studio, bạn cũng có thể sử dụng nó và bất kỳ lĩnh vực nào miễn sao thật sự phù hợp.
Hy vọng rằng với những hướng dẫn sẽ hỗ phần nào cho công việc thiết kế web cũng như nhu cầu tiếp thu, học hỏi thêm những kỹ năng, kinh nghiệm hay về photoshop.
Chúc các bạn thành công!.
css3 animation joomla security template web
Tin Tức Liên Quan
Tạo icon RSS bóng bẩy
Trong bài viết này chúng ta sẽ tạo một biểu tượng rss đầy màu sắc và cực kỳ bóng bẩy cho blog của bạn
Tạo chữ màu bạc tỏa sáng bằng photoshop
Trong bài viết này bạn sẽ có thể tự tay làm một hiệu ứng chữ đẹp mắt cho website hay blog của bạn, với chữ màu bạc tỏa sáng cực kỳ đẹp mắt.
Tạo chữ phát sáng nhiều màu sắc
Với hướng dẫn này mình sẽ chỉ các bạn tạo hiệu ứng chữ phát sáng với nhiều màu sắc lấp lánh như hình dưới, chỉ với 5 bước đơn giản thui, nào bắt đầu bạn nhé
Mẹo ghép ảnh cực cool bằng Photoshop
Bài hướng dẫn giúp bạn có được những bức ảnh ghép ấn tượng với thao tác đơn giản
Tự tay làm danh thiếp cực pro bằng Photoshop
Thủ thuật này sẽ giúp bạn thiết kế danh thiếp có giao diện chuyên nghiệp, hiện đại mà không cần phải có quá nhiều kiến thức về đồ họa mà chỉ bằng Photoshop và vài bước thao tác đơn giản
Tạo button đơn giản cho web bằng Photoshop
Trong bài viết này chúng ta sẽ tự tay làm một button đơn giản cho website hay blog của bạn chỉ với vài bước đơn giản
Mẹo tạo chữ kim loại 3D
Chỉ với vài bước đơn giản mình sẽ giúp các bạn tạo logo chữ kim loại hiệu ứng 3D cho website của mình, rất chi là dễ dàng lun, cùng thực hiện theo nhé
Tạo Abstract Wormhole Background
Hôm nay, mình sẽ chỉ các bạn cách sử dụng brush và điều chỉnh các lớp trong photoshop cs5, bạn có thể bạo ra một hình nền trừu tượng
Hiệu ứng chữ băng
Hôm nay, hy vọng rằng những hướng dẫn sau đây sẽ truyền cảm hứng cho bạn để tạo thêm một số hiệu ứng ice cho thiết kế của bạn
