Với hướng dẫn này mình sẽ chỉ các bạn cách tạo ra một mẫu template sử dụng cho những trang chuyên về sức khỏe, kinh doanh hiệu thuốc tây. Hướng dẫn này là sự tổng hợp của những kiến thức trước và bổ sung thêm những điều thú vị mới, và thật sự đáng tiếc nếu bạn không từng bước làm theo hướng dẫn để cùng ôn tập lại kiến thức và dung nạp thêm những điều mới.
Bước 1: Tạo một file mới với kích thước 742 x 642px, độ phân giải 72dpi. Dùng công cụ Rectangle tool (U) vẽ một hình chữ nhật để làm background, đặt tên cho nó là “Background“.
Sau đó áp dụng hiệu ứng Gradient Overlay cho nó như sau
Hoàn tất bước 1 chúng ta thu được kết quả
Bước 2: Tiếp tục, nhấn Ctrl + J để nhân đôi layer background này. Tuy nhiên, chỉnh thông số Fill về 0% và áp dụng lại hiệu ứng Gradient Overlay.
Sau đó merge cả hai layer lại
Bước 3: Dùng công cụ Rectangle Tool (U) vẽ một hình chữ nhật thẳng đứng nằm bên trái background, đặt tên là ‘left”
Bạn chỉnh Fill xuống về 0%, Opacity: 30% và áp hiệu ứng Gradient Overlay như sau:
Nhân đôi layer ‘left”, đổi tên layer mới thành “right” và di chuyển nó về phía bên phải layer background.
Sau 3 bước thực hiện chúng ta sẽ được background cho web
Bước 4: Chọn lại công cụ Rectangle tool để phân chia background thành hai nửa
Giảm Opactiy về mức 0% và áp dụng Gradient tool cho nó như sau:
Bước 5: Bây giờ chúng ta sẽ tạo hình vẽ viên thuốc, sử dụng Rounded Rectangle Tool (U), cho radius: 120px, vẽ một hình chữ nhật với màu #100000.Đặt tên cho layer này là “drug”
Sau đó, áp dụng các hiệu ứng cho nó như sau
Inner Glow:
Bevel and Emboss:
Gradient Overlay:
Bước 6: Tiếp theo chúng ta sẽ tạo bóng đỗ cho nó.Nhân đôi layer “drug” với phím Ctrl + J, nhấn phím Ctrl + T di chuyển hình ảnh như bên dưới, sau đó giảm Fill về mức 0%, và chỉnh lại hiệu ứng Gradient Overlay, đặt tên cho layer mới “drug shadow1” và chỉnh lại gradient như sau:
Tiếp tục, tạo một layer mới, đặt tên là “shadow2”, dùng công cụ Rectangle tool, vẽ một hình chữ nhật nhỏ với radius: 300px, sau đó vào Filter > Gaussian blur, cho nó radius: 4.5px, giảm opacity xuống còn 30%.
Bước 7: Để chia viên thuốc làm hia màu, bạn dùng công cụ Rectangle tool, chọn một nửa bên phải, nhấn Ctrl + Shift + I để đảo ngược vùng chọn, sau đó tắt layer shape đi, chọn layer “drug” nhấn Ctrl + C, Ctrl + V bạn sẽ có một nửa với màu đen như hình.
Sau đó áp dụng các hiệu ứng cho nó
Inner Glow:
Gradient Overlay:
Và đây là kết quả:
Bước 8: Tạo layer mới, đặt tên “line-center”, dùng công cụ Rectangular vẽ một hình chữ nhật với chiều rộng là 1px, chiều cao bằng với chiều cao của viên thuốc mà bạn vẽ, tô màu trắng. đặt layer này trên tất cả các layer
Bước 9: Bây giờ chúng ta bắt đầu tạo menu, dùng công cụ Rectangle tool vẽ một hình chữ nhật với chiều rộng tùy vào kích thước của drug mà bạn chọn chiều rộng thích hợp, chừng 105px, radius:10px đặt nó ở mép trên viên thuốc (như hình) sau đó áp dụng các hiệu ứng
Drop shadow:
Gradient Overlay:
Bước 10: Nhân đôi layer bước 9, sử dụng phím Ctrl + T để thay đổi vị trí sao cho phù hợp, đổi lại hiệu ứng như sau
Gradient Overlay:
Bước 11: Tiếp tục nhân đôi layer ở bước 10 thêm 2 lần nữa và sắp xếp nó như bên dưới.
Bước 12: Dùng Rectangle tool vẽ một hình chữ nhật bên dưới background, sử dụng màu #E3E3E3, đặt tên là “footer”.
Bước 13: Tạo layer mới, sử dụng công cụ Pencil tool để vẽ một đường thẳng nằm ngang với các chấm nhỏ. Cho màu foreground: #C6C6C6 và lựa chọn các thông số trong bảng Brushes Pallete như sau:
Nhấn giữ phím shift vẽ một đường thẳng nằm ngang ở mép trên của layer “footer”
Ctrl + J để nhân đôi layer này, và di chuyển nó xuống bên dưới mép dưới của layer “end”.
Bước 14: Đến đây, chúng ta sẽ tạo phần tìm kiếm
Tạo layer mới, vẽ một hình chữ nhật với kích thước 150 20px, tô màu #FBFBFB. Sau đó, dùng Pecil tool, size: 1px vẽ các đường viền với những màu sắc như sau:
Bước 15: Tiếp theo, bạn dùng Rounded Rectangle Tool (U) vẽ một hình chữ nhật với màu #F20000, radius: 1px, kích thước 30 x 18px, đặt bên phải của ô tìm kiếm
Sau đó áp dụng các hiệu ứng cho nó như sau:
Inner Glow:
Về cơ bản chúng ta đã hoàn thành. Nhưng để các bạn dễ dàng hình dung ra một trang web thật sự thì chúng ta sẽ gắn văn bản vào.
Bước 15:
(Hiệu thuốc)
(Online)
(Tất cả cho cơ thể khỏe mạnh)
(Home)
(Giới thiệu, Giá thuốc, Liên hệ)
(Search)
(Go)
(Welcome, Special)
(store, offers)
(Nội dung mô tả)
(Phần chữ in đậm)
Thiết lập cho chữ phần footer
Sau khi hoàn tất 15 bước ấy chúng ta đã có một template độc đáo dành cho hiệu thuốc online của mình. Mong rằng qua bài học này các bạn có thêm nhiều kiến thức mới cũng như phần nào hình dung ra được cách design một trang web sao cho đẹp nhất. Chúc các bạn thành công!.
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
