Bạn có tin rằng đôi lúc chúng ta chỉ cần một cái background thật đẹp mà không cần header hay những thứ “linh tinh” khác cũng khiến cho web của bạn hấp dẫn đến bất ngờ không?. Nếu không tin, mình sẽ minh chứng cho các bạn thấy thông qua kết quả thế này.
Bắt tay thực hiện nhé!
Bước 1: Để có một background đẹp và mang tính trườu tượng trước tiên bạn phải tạo kích thước cho nó, mình thiết lập kích thước 1100 x 1100 px.
Sau đó dùng Gradien kéo màu #1b204c đến #472373.
Bước 2: Để cho background thêm phần trườu tượng thì những họa tiết phếch, bệt như những tình huống bắn ra của sơn sẽ giúp background cuốn hút hơn. Bạn có thể tìm kiếm trên mạng những brush trườu tượng hoặc tìm những vector watercolors như hình dưới đây hoặc có thể sử dụng bất kỳ thứ gì bạn thích miễn sao có cảm giác nó trườu tượng là được oy, hi. Nhưng nếu có khả năng tạo ra nó thì càng tuyệt vời hơn. Trong trường hợp này mình đã “lượm lặt” được hai hình này, và sử dụng hình bên phải cho background của mình.
Bước 3: Ctrl + T để điều chỉnh vị trí và chiều bạn đặt vào nền. Với những phần dư thừa, bạn có thể sử dụng brush và cho màu froreground là màu đen để xóa hoặc chép đè lên những phần ấy.
Bước 4: Bây giờ giảm độ trong suốt của lớp watercolors 70% và thiết lập chế độ pha trộn của nó là Overlay. Bằng cách này màu sắc của watercolors sẽ đẹp hơn.
Bước 5: Tạo môt lớp mới nằm trên layer watercolor. Sử dụng Gradient đi từ màu đen vẽ thẳng lên để, màu đen ấy mất dần.
Bước 6: Tiếp tục tạo 2 layer mới, vẽ Radial Gradients từ màu trắng đến trong suốt và thiết lập Overlay cho cả hai lớp. Tuy nhiên, layer 1 bạn cho Opacity là 40%, layer 2 là 100%.
Sau khi hoàn tất bước 6 bạn sẽ được kết quả thế này.
Bước 7: Vậy là chúng ta đã hoàn thành cách tạo abstrack backgroun, nhân đây mình xẽ “bonus” thêm cho các bạn một vài bước thú vị nữa để xây dựng lên một trang hoàn chỉnh nha
Web thì nên cần có logo, trong trường hợp này mình không hướng dẫn các bạn cách tạo một logo đẹp (mình sẽ cố gắng chỉ các bạn ở bài sau), nên chúng ta tạm sử dụng chữ làm logo nhé.
Ví dụng mình tạo logo chữ : psd vs net (mình sử dụng font chữ Egyptian505 BT Bold và Egyptian505 LT BT Light), bạn thiết lập các thông số cho nó như hình.
Bước 8: Sau khi co logo rồi thì mình tiếp tục tạo menu nhé
Bạn vẽ một hình chữ nhật với chiều rộng tùy vào kích thước trang web của mình, nhưng chiều cao thông thường cho menu thì bạn nên chọn 30 -35px thui. Tô màu và giảm opacity xuống. Sở dĩ bạn giảm opacity là để làm nổi bật những thông điệp mà mình muốn gửi đến người dùng, thiết lập stroke cho nó.
Bạn nhập chữ cho thanh menu
Bước 9: Bạn nhập chữ cho phần nội dung của mình với thiết lập Gradient như sau:
Bước 10: Thông thường thì web nên có nhiều thông tin thú vị để thu hút người dùng và bạn nên show những thông tin ấy ra. ví dụ mình muốn hiển thị thêm 3 mục thông tin với 3 cột như hình. Để tạo nên điều đó bạn nên dùng Grid tại các vị trí trên thanh thước như: 50px, 320px, 610px, 900px.
Sau đó bạn nhập chữ và đặt hình vào thui
Chúng ta đã hoàn thiện website của mình. Mình muốn nói thêm chút xíu về footer. Với những background trườu tượng thì footer hãy nên đơn giản, bạn chỉ cần một đường border top thui là đủ rùi.
Với những hướng dẫn này hy vọng sẽ giúp các bạn có thêm những kỹ năng hữu ích cũng như có ý tưởng mới cho web của mình. Hãy thử làm theo hướng dẫn cộng với sự nhạy bén của mình mà làm ra những trang web đẹp bạn nhé.
Chúc các bạn thành công!
thu thuat photoshop hoc photoshop photoshop tutorial web layout tutorial photoshop tuts psd create web layout abstrack background create background web tuts photoshop create web layout huong dan tao web layout create background
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
