Menu Điều Hướng

Tạo abstract background

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.

Abstract background

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.

Abstract background

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.

Abstract background

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.

Abstract background

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.

Abstract background

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.
Abstract background

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%.

Abstract background

Sau khi hoàn tất bước 6 bạn sẽ được kết quả thế này.

Abstract background

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.

Abstract background
Abstract background

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ó.

Abstract background
Abstract background

Bạn nhập chữ cho thanh menu

Abstract background

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:

Abstract background
Abstract background

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.

Abstract background

Sau đó bạn nhập chữ và đặt hình vào thui

Abstract background

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.

Abstract background

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
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
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
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
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
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
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
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
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
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

Tư vấn thiết kế website giá rẻ

Chat FB
Tư vấn thiết kế website giá rẻ
Chat Zalo

Điện Thoại