Tạo abstract background

28/07/2012

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!

Chuyên Mục:

Bài viết được đăng bởi tracy

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !