Hình nền Wallpaper chất lượng tháng 9 - 2013

Hình nền Wallpaper chất lượng tháng 9 - 2013: [Tháng 9-2013] Một tháng cũ vừa kết thúc, tháng 9 vừa đến. Theo thường lệ mỗi tháng, tạp chí Smashing magazine cung cấp cho người đọc một số wallpaper chất lượng từ khắp nơi trên thế giới. Hãy làm mới desktop của bạn để đón chào tháng mới nhé. Chúc mọi người tháng mới vui vẻ và gặp nhiều may mắn nhé.

Twitter Bootstrap qua 15 mẫu thiết kế web nên xem

Twitter Bootstrap qua 15 mẫu thiết kế web nên xem Twitter Bootstrap bao gồm các mã HTML và CSS cơ bản cho Typography, forms, buttons ... và nhiều thành phần khác của website. Nó giúp chúng ta giảm thiểu thời gian thiết kế HTML và CSS, định nghĩa sẵn các class CSS công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình. Ngoài ra, Twitter Bootstrap còn hỗ trợ Responsive Design. Và hôm nay, mình sẽ giới thiệu một vài website mẫu dùng Twitter Bootstrap đẹp mắt, dễ gây ấn tượng cho người xem.

Accordion menu với HTML5 và CSS3

Accordion menu với HTML5 và CSS3: Accordion menu là một dạng menu được dùng nhiều trong các thiết kế web hiện đại. Ngoài việc dùng cho menu, Accordion menu có thể sử dụng cho nội dung, hình ảnh.

Những điểm cần lưu ý để tạo một Portfolio hấp dẫn

Với tư cách là giám đốc thiết kế của Behance, Matias Corea đã dành rất nhiều thời gian xem xét các portfolio ấn tượng của rất nhiều nhà thiết kế trên thế giới.

>> Bài học lớn từ những thiết kế thành công
>> 5 xu hướng thiết kế Logo rập khuôn cần tránh
>> Thiết kế Apple: Tỉ lệ vàng, hình chữ nhật vàng, dãy Fibonacci
>> 30 điều mà các Web Developer cần biết
>> Đơn giản là tốt nhất

Để có cái nhìn sâu sắc hơn: việc gì nên làm (việc gì không nên) khi các nhà các thiết kế Việt Nam muốn tạo cho mình một portfolio sáng tạo hấp dẫn, chúng tôi xin ghi lại nhận xét và lời khuyên của ông để chúng ta có một sản phẩm trực tuyến sáng tạo và “đánh gục” được bất cứ một doanh nghiệp nào khi nhìn thấy.

1. Xem lại toàn bộ sản phẩm, chọn cái tốt nhất

Hãy dành thời gian xem xét lại toàn bộ sản phẩm mà bạn đã từng làm, và hãy cẩn thận để chọn những sản phẩm mà nó sẽ phù hợp với định hướng sắp tới.

Có một lời khuyên từ cố vấn của tôi là: hãy giới thiệu các sản phẩm mà bạn sẽ muốn làm trong tương lai. Hãy chọn những dự án mà bạn thực sự tự hào, nhìn đẹp nhất v..v

Chọn ít nhất 05 dự án mà qua đó chứng minh được độ “rộng” trong công việc của bạn, nhưng hãy chọn lọc.

Hãy luôn ghi nhớ điều này, vì rõ ràng, việc chỉ có một vài dự án nhưng chất lượng tuyệt vời, sẽ hơn hẳn có vài chục dự án nhưng một vài thứ trong số chúng nhìn “tàm tạm”. Không thể không có một portfolio ấn tượng với việc có các dự án yếu kém.

“Luôn giới thiệu sản phẩm phù hợp với định hướng công việc của bạn trong tương lai”

2. Sử dụng hình ảnh đẹp, và chia sẻ câu chuyện.

Sau khi chọn lựa các dự án hoặc sản phẩm bạn muốn thể hiện, hãy thêm những thông tin về dự án, cũng như quá trình hình thành dự án, hoặc suy nghĩ của bạn để làm sao thể hiện dự án đó tốt nhất.

Có một số lượng lớn người truy cập muốn biết được câu chuyện phía sau quá trình hoàn thành dự án của bạn, hãy suy nghĩ về quá trình thể hiện – từ ý tưởng ban đầu, quá trình phát triển phác thảo và hoàn thành sản phẩm thế nào.

Một nguyên tắc nhỏ là hãy trình bày đoạn miêu tả này đầu tiên, sau đó là những bức ảnh miêu tả chi tiết hơn của từng giai đoạn công việc. Tạo một chút phong cách cho các tấm ảnh là một việc nên làm, miễn làm nó không làm mất đi điều mà bạn muốn thể hiện.

Theo Matias: “ Bắt đầu với đoạn mô tả ngắn về dự án, thêm một tiêu đề có ý nghĩa hoặc gợi ý về điều mà dự án này thể hiện. Bạn phải chắc rằng người xem chỉ cần liếc nhìn đoạn văn ngắn, kèm thêm hình ảnh đầu tiên vừa đủ để người đọc có hứng thú xem toàn bộ dự án.

NOVUM 11/11 by Paperlux

Written Portraits by Van Wanten Etcetera

Citroën DS Line Book by Laurent Nivalle

Một khi bạn đã quyết định cách bố trí khung để giải thích dự án của bạn như thế nào, hãy tập trung cho việc tìm kiếm những hình ảnh hoản hảo hoặc phương tiện truyền thông để giới thiệu dự án, sau đó bắt đầu tạo một ảnh bìa.

“Khi sử dụng hình ảnh để giới thiệu dự án của mình, điều quan trọng nhất là hình ảnh đó phải “mưu mẹo”, theo lời Matias.

Ảnh bìa giới thiệu không nhất thiết phải là hình ảnh chi tiết trong dự án, bạn có thể thiết kế trang bìa cho mình dựa theo yêu cầu hoặc điểm đặc biệt của dự án. Ví dụ: trang bìa bạn dùng chữ để miêu tả, hãy sử dụng hoặc thiết kế hình ảnh đi theo sao cho hợp lý nhất.

Orlando Aquije Abarca on the Behance Network

Heydays on the Behance Network

Andy Gugel, Art Director on the Behance Network

3. Thiết kế đơn giản, hãy để sản phẩm là cái được tập trung

Khi thiết kế một trang portfolio, cái bạn cần là một trang wesite đơn giản. Cái bạn cần là chính là sự tập trung vào sản phẩm của bạn, do đó, hãy loại bỏ những yếu tố gây nhiễu.

“Trang web  của bạn là nơi mọi người tìm thấy công việc của bạn. Trang web quá hào nhoáng, độc đáo sẽ gây khó khăn trong việc tìm kiếm nội dung, lời khuyên này không phải bởi vì tôi yêu thích phong cách thiết kế tối giản” – mà đó là yếu tố quan trọng để bạn tạo ra một môi trường trực quan để giới thiệu công việc của bạn hiệu quả nhất.

“Giao diện đơn giản cũng sẽ làm nổi bật sản phẩm của bạn lên trên nền trang web, vị trí xứng đáng dành cho nó”.

Tóm lại, một menu chuyển hướng đơn giản, và một vài tính năng là một trang web cần có là đã đủ. ”Có một portfolio với bộ sưu tập sản phẩm của mình, kèm theo một trang liên hệ tác giả: – đó đã là một trang portfolio tuyệt vời.

Theo Matias, việc chỉ sử dụng một phông chữ, và các thành phần khác phù hợp với font chữ đó, chọn một màu đồng nhất khi nhấp vào liên kết sẽ làm cho thiết kế nhìn đơn giản nhưng vẫn rất đẹp.

bradgeiger.com, built on ProSite

iancrombie.net built on ProSite

4. Thể hiện quan điểm.

Ở trang giới thiệu, hãy kể về bạn, điểm đặc biệt, quan điểm v..v chứ đừng chỉ tập trung vào công việc. Dưới đây là vài điểm bạn có thể chia sẻ:

• Chia sẻ quan điểm của bạn: là người làm sáng tạo, bạn phải có quan điểm của riêng mình về nền công nghiệp và thế giới sáng tạo đúng không? Lúc nào bạn sáng tạo nhiều nhất? Mong muốn về nghề nghiệp của bạn là gì?

• Chia sẻ câu truyện về nghề nghiệp của mình:  tại sao bạn lại thích thiết kế? Quan điểm về thiết kế của bạn là gì? Bạn đã lấy những ý tưởng sáng tạo ở đâu v…v

• Tổng hợp các kinh nghiệm của bạn; Hướng thông tin của bạn với công việc sáng tạo, sự kết nối của bạn với nghề này. Một số suy nghĩ về khách hàng, về tạp chí…

• Cởi mở; Chia sẻ một số sở thích, những ước mơ mà bạn mong muốn.

“Cá nhân hóa trang “Giới thiệu – About” để nói về BẠN, chứ không phải liệt kê những việc bạn đã làm”.

Thêm một vài yếu tố đặc biệt và quảng bá công việc của mình

Nếu có một vài giải thưởng, hoặc đã từng xuất hiện trên báo chí, truyền hình thì sao bạn lại không “khoe” ra nhỉ?

Bên cạnh  đó, việc chia sẻ dễ dàng các sản phẩm, địa chỉ của mình trên các phương tiện truyền thông trực tuyến(facebook, twiter…) sẽ giúp bạn tương tác và tìm kiếm độc giả cho mình nhiều hơn.

Nếu bạn có một Blog cá nhân, tại sao không tích hợp vào portfolio của mình? Một blog được cập nhật thường xuyên, sẽ thể hiện bạn là người chuyên nghiệp và chứng tỏ được giá trị của mình.

Matias khuyên: Blog luôn cần cho website của bạn, đừng quên điều đó.

Luôn tươi mới

Cuối cùng, hãy luôn giữ Portfolio của bạn tươi mới, một portfolio tốt nhất khi nó được cập nhật thường xuyên. Do đó, khi có dự án mới hãy nhớ cập nhật  ngay lập tức, tuy nhiên, hãy nhớ cẩn thận trong việc lựa chọn sản phẩm khi cập nhật.

Hội thảo phát triển Web WDC2013 tại TPHCM

Hội thảo phát triển Web WDC2013 tại TPHCM: Đã hơn 15 năm kể từ khi Internet đặt nền móng tại Việt Nam. Website đã dần dần trở thành một phần rất quan trọng đối với cá nhân/doanh nghiệp và có hàng trăm lý do để thể hiện tầm quan trọng đó.

Download Free Flat Icon

Flat Design is trendy in web design industry. Flat design is a minimalist design which does not mean use of any of effect such as gradients, drop shadow, 3D effects and skeuomorphism. Basically, these flat designs appeal like clean, modern, straight-forward and bold look with the use of necessities such as bold colours, clean layout, shapes and sharp typography. There are many flat icons available on web not all of them up to the mark. We bring a high quality useful free flat design icons which can use on your projects.

Below are 28 Download Free Icon Sets which can use your personal and commercial projects.

Free Flat Social Media Icons

35 icons (PNG and PSD fromats)

Flatilicious 

48 Free Flat Icons (PSD format)

Flat Icons

20 Icons (PSD format)

Flat Icons

(3600 free Icons)

Flat Icons

24 Icons (PSD)

Plex

119 Icons  (PNG)

Cosmo Mini 

1262 Icons (PNG)

Eldorado Mini

1262 Icons (PNG)

Circle Icons Pack

150 Icons (PNG)

Flat Icons

24 Icons (PSD)

Flat Design Icons Set Vol1

16 Icons (PSD)

Flat Design Icons Set Vol2

16 Icons (PSD)

Flat Design Icons Set Vol3

16 Icons (PSD)

Flat Design Icons Set Vol4

16 Icons (PSD)

Flat Icons Pt.1

12 Icons (PSD)

Flat Icons Pt.2

12 Icons (PSD)

Flat Icons

12 Icons (PSD)

Flat Icon Set

16 Icons (PSD)

Flat Credit Card Icons

5 Icons (PSD)

Publicons

12 Icons (PNG & SVG)

Flat Social Icons

72 Icons (AI & EPS)

Flat Social Icons

14 Icons (PSD)

Free Shades

44 Icons (PSD)

Eldorado mini free

1262 icons (PNG)

Email Icons

(PSD)

Publicons

12 Icons (PNG, SVG)

Flat files

Free icons (PSD, PNG)

Học làm game với HTML5

Hiện nay, HTML5 đang trên đà phát triển, những ứng dụng của nó và những tiện ích của nó ngày càng phát triển và được nhiều cộng đồng mạng quan tâm và các nhà đầu tư lớn về CNTT chú trọng. Chưa biết nó có thể đánh bại Flash hay không, nhưng với những gì mà HTML5 hỗ trợ, nó thật tuyệt vời. Và bạn, 1 amater chưa biết gì về HTML5, nếu quan tâm nó, bạn có thể tạo ra những game cực kỳ đơn giản và dể hiểu.

Với HTML5, tất cả là có thể để làm 1 game từ cơ bản đến phức tạp, từ 2D đến hỗ trợ cả 3D rất sống động. Mình sẽ viết ra đây để giới thiệu các bạn và mong các bạn yêu thích lập trình có cơ hội tìm hiểu nó. 

Tất cả những gì bạn cần để viết 1 game HTML5 là 
+ Trình duyệt : máy của bạn cần cài ít nhất 5 trình duyệt để test và kiểm tra lỗi : IE, Chrome, Safari, Firefox, Opera. Hãy lưu ý với IE nhé, anh ấy rất là khó tính, hehe. 
+ Nền tảng Javascript : bạn cần phải có nền tảng javascipt cơ bản để có thể hiểu được những gì cơ bản nhất mà HTML5 thể hiện. Và giúp bạn hiểu những mã nguồn HTML5 nhanh hơn. 
+ Jquery : thực ra, đây là 1 thư viện viết lại bằng javascript nhưng nó giúp chúng ta dễ dàng hơn trong việc lập trình, và nó cũng fix 1 số lỗi tự động trên các trình duyệt phổ biến khi chúng ta gọi thực thi bàng jquery mà không cần quan tâm. Tuy nhiên, sự hỗ trợ này vẫn còn hạn chế, vì các trình duyệt phát triển không cái nào giống cái nào, nhất là chú IE. 
+ PHP : hoặc bất cứ ngôn ngữ server nào. Nếu bạn muốn làm 1 game HTML5 thực sự, bạn phải đồng bộ dữ liệu để lưu lên server khi cần. 
+ Kiến thức HTML5 : bạn hãy tìm hiểu về những cái mà HTML5 hỗ trợ, nó thật mạnh mẽ và đáng để tìm hiều. Bạn có thể tìm kiếm trên mạng hoặc đọc ở đây : http://slides.html5rocks.com/#landing-slide , đây là site mà được hỗ trợ củaGoogle để thành lập, rất hay và nhiều thứ cập nhật liên tục. 

Bạn cần chuẩn bị nhé. Tuần sau, mình rãnh sẽ viết demo và hướng dẫn chi tiết để các bạn làm được 1 demo như thế này : 
 

Mình đã thực hiện trong vòng khoảng 3 tuần, hehe. Các bạn nào rãnh có thể thực hiện trong vòng 1-2 tuần, vì mình còn đi làm :D 

Free jQuery Menu Plugins

HTML5 CSS3 jquery menu comes either copy and paste the code into your own design or modify the menu to suit your needs.

 

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

 

iOS style sliding menu

Here’s an easy way to create an iOS style, side sliding menu.

 

Animated css3 Mega Menu

This is pure HTML5/CSS3 menu. Menu has HTML5 structure and works on all major browsers.
Menu is easy to edit and integrate into any website.
Menu works (the main structure is 100% same) on Internet Explorer 9, 8, 7… and a lot of old browsers but animation and some other CSS3 features do not work.

 

Metro Style Pop-Out Navigation menu

This is a Metro style pop-out navigation that can be used as a navigation menu, a one page site or a combination of both.
Easy options to configure the javascript to the way you want it and other areas are fully customizable in the css.
Use this to bring an interactive element to your site or use it as the whole site. It’s up to you.

 

Accessible Dropdown menu

Try navigating the dropdown menu using tab key

 

CSS3 Multi Level Accordion and Tree Menu

CSS3 Multi-Level Accordion and Tree Menu is a 2 in 1 – Pure CSS3, no javascript, Well styled menu that allows you to easily create multilevel accordion style menus with unlimited levels – The menu comes with 3 sample menus that include 2 stylish accordion menus in ultra modern beautifully styled dark and light versions plus a multi-level tree menu. The menu is well coded and documented with cross browser support including a CSS2 fallback solution for IE8.

 

Vertical Responsive Navigation

Vertical Responsive Navigation is a navigation component based in CSS and Javascript code. It’s responsive navigation, collapsible on mobile devices, has two themes and 12 preset colors.

 

CSS Dropdown menu

In redeveloping the Venturelab site we became increasingly aware that there was a lot of content that needed navigating extremely simply and fairly rapidly. We have so much to say and such a lot of content that the navigation of the site needed to be even more dynamic and encompassing than normal.

 

TAKO Vertical Dropdown Menu

This it’s a very simple menu with 3 columns of pages but it has a very good design and color combinations… Its very efficient for people who want a simple menu with modern design.

 

Slicnot – Clean CSS Menu with Sliced Notification

Hello everybody! Slicnot is a small CSS toolkit that allows you to create anything from just a simple plain button to a complex drop-down navigation menu bar with very less amount of effort. It comes with four different color styles, fade animation, sliced notification and 361 Font Awesome icons. Everything is build with pure CSS3 (no image used, no JavaScript) and very easy to customize. It looks great even on a retina display screen.

 

Css-only Lavalamp-like Fancy Menu Effect

This time let’s get inspired by the sliding menu effect, also known as the Lavalamp effect (ex. here). We’ll recreate it with pure css – using css3 transitions and the general sibling combinator selector. Below we’ll discuss three simple examples (make sure to see the demo first).

 

Zozo Tabs

The brand-new version (v3.5) of Zozo Tabs is Fully responsive and Touch-Enabled using HTML5 and CSS3 standards for impeccable speed and performance on desktop browsers and most importantly on mobile browsers. It runs and feels just like a native app!. Also allows you to scroll automatically to top of page when clicking on tabs/dropdown menu on smaller screens to show your content.

Zozo Tabs is a lightweight and highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly without writing any code. Some of it’s key features includes: such as horizontal and vertical tabs, Deep-Linking, 10 Flexible ways to position, Powerfull API, 10 unique themes and more. Did we mention it works also on older browsers such as IE7 and IE8?

 

Hiệu ứng chữ chói sáng trong Photoshop

hiệu ứng chữ chói sáng trong Photoshop

Khi bạn đã từng tạo ra bất kỳ hiệu ứng nào, hãy sử dụng Action Palette để lưu trữ các chức năng bởi vì nếu bạn cần có hiệu ứng tương tự một lần nữa, bạn sẽ dễ dàng hơn để có được kết quả tương tự.

Bước 1 — Tạo một Document mới

Mở Pho to shop. Chọn File New> hoặc nhấn Ctrl / Com mand N. Tôi đang sử dụng kích thước hình nền 1440px (chiều rộng) X 900px (chiều cao) nhưng bạn có thể sử dụng bất kỳ kích thước nào bạn muốn.

Bước 2 — Tạo ra các Text 3D

Chúng tôi sẽ bắt đầu tạo Text 3D với sự giúp đỡ của Illus tra tor. Trước tiên, bạn cần gõ Text trong Illus tra tor. Bạn có thể sử dụng bất kỳ Text nào mà bạn muốn. Tôi chỉ sử dụng Text “FX”. Mở Illus­tra tor, chọn Type Tool và viết Text. Sau khi viết, thay đổi font chữ thành “Hobo Std Medium”.

Bước 3 — Tạo màu cho Text

Thay đổi màu sắc của Text. Đối với chữ “F” sử dụng màu xanh (# 094569) và “X” sử dụng màu da cam đậm (# AB7D1B). Hình ảnh của bạn sẽ giống như dưới đây.

Bước 4 — Thêm hiệu ứng 3D vào Text

Bạn cần phải tạo ra Text 3D thật rắn chắn. Để làm điều đó, vào Menu> Effect 3D» Extrude & Bevel …

Bước 5 — Đặt màu Background

Khi bạn đã hoàn thành với Text 3D, quay trở lại Pho to shop và thay đổi màu sắc của back ground thành màu xanh (# 000b12).

Bước 6 — Đặt Text 3D trong Photoshop

Trong bước này, bạn sẽ đặt các Text 3D trong Pho to shop. Copy
Text từ Illus tra tor và paste nó vào Pho to shop. Chọn layer với text, kích chuột phải vào nó và chọn Ras ter ize Layer.

Bước 7 — Tách Text

Bây giờ, bạn đang sẽ tách text thành 2 phần. chọn Rec tan gu lar Mar quee Tool (M) và tạo vùng chọn của chữ “X”. Nhấn Ctrl +X để cắt và Ctrl + V để paste chữ cái. Căn chỉnh text cho phù hợp.

Bước 8 — Cài đặt Dodge Tool

Bạn cần phải tạo High lights trên text. Chọn Dodge Tool (O) từ Tools và làm theo các cài đặt Brush như bạn thấy trong hình bên dưới.

Bước 9 — Thêm Highlights

Sử dụng Dodge Tool để tô màu qua những vùng bạn muốn làm nổi bật. Bạn có thể có cảm hứng từ hình bên dưới.

Bước 10 –Thêm nhiều High lights hơn

Làm theo bước 9 và tạo ra nhiều điểm nổi bật trên những vùng đã khoanh tròn.

Bước 11 — Thêm Shadows

Khi bạn đã hoàn thành việc thêm các điểm nổi bật, bạn cần phải tạo shadow ở phía đối diện. Chọn Burn Tool (O) từ Tools và tô màu bóng tối.

Bước 12 — Thêm nhiều Shad ows hơn

Làm theo bước 11 và tiếp tục với việc thêm các shadow vào trong các vùng đã được khoanh tròn.

Bước 13 — Tăng cường độ

Để tăng thêm độ tương phản cho Text, chọn Dodge Tool (O). Tăng kích thước Brush lên 800px và nhấp chuột lên toàn bộ chữ “F” và sau đó, nhấp chuột qua chữ “X” để có được kết quả tương tự như trong hình ảnh bên dưới.

Bước 14 — Thêm các góc sáng (đèn pha)

Bây giờ, bạn sẽ thêm một số đèn chiếu điểm để làm cho các góc của Text được chiếu sáng. Chọn Brush Tool (B). Với Mas ter Diam e ter 90px, chọn một Brush tròn, mềm. Chọn màu của Fore ground là màu trắng và tạo một layer mới. Tô màu qua các góc của Text. Xem hình ảnh bên dưới.

Bước 15 — Xóa Feather

Xoá bỏ các phần của Glow, không những trong Text mà còn trong background.

Bước 16 — Thêm Outer Glow

Để thêm Outer Glow cho đèn pha, nhấp chuột lên but ton Add a layer style. Bạn có thể tìm thấy but ton đó ở phần bot tom của Lay ers palette. Nếu bạn không thấy Lay ers palette, chỉ cần nhấn F7 và nó sẽ xuất hiện. Chọn Option Outer Glow và làm theo các cài đặt sau. Nhấn OK.

Bước 17 — Sao chép Glow Spotlight

Bây giờ, sao chép Glow mà bạn đã tạo ra trong bước 14. Chọn Smudge tool ® và drag Brush từ phải sang trái, để làm cho Glow lan tràn trên text. Xem hình ảnh bên dưới để biết tôi muốn đề cập đến điều gì.

Bước 18 — Blend ing Glow

Chọn Smudge Tool ® và drag Glow xung quanh các góc của text. Xem hình bên dưới.

Bước 19 — Thêm Feather Glow

Bây giờ, bạn sẽ thêm Glow cho các góc của hiệu ứng chữ css3. Chọn Brush tool (B). Chọn một Brush tròn, mềm, và thiết lập Mas ter Diam e ter lên 90 px. Tạo một layer mới và tô màu Glow xung quanh các Edge như bạn thấy bên dưới.

Bước 20 — Định vị High lights cho chữ “X”

Trong bước này, chúng ta sẽ tập trung làm việc trên chữ “X”. Định vị các đèn pha. Thực hiện tương tự như bạn đã làm trong bước 14 và 15. Xem hình ảnh bên dưới để tham khảo.

Bước 21 — Thêm Outer Glow

Thêm Outer Glow cho đèn pha. Nhấp chuột lên but ton Add a layer style, chọn Outer Glow và thực hiện các cài đặt sau.

Bước 22 — Lựa chọn Brush

Chọn Brush Tool (B). Chọn Brush cứng, tròn và thiết lập Mas ter Diam e ter lên 3px. Bạn sẽ cần nó trong các bước tiếp theo.

Bước 23 — Tạo Path

Chọn Pen Tool ℗ và tạo một Path như bạn có thể thấy trong hình bên dưới.

Bước 24 — Thêm Stroke Path

Bước 25 — Thêm Brush Stroke

Bước 26 — Bổ sung thêm Stroke Path

Lặp lại các bước 22–25 để thêm Stroke Path.

Bước 27 — Tạo High lights trong các khu vực có shadow.

Trong bước này, bạn sẽ thêm Glow trong những vùng tối để tạo ra sự phản chiếu. Chọn Pen Tool ℗ và tạo Path như bạn thấy trong hình bên dưới. Nhấn Ctrl + Enter để tạo một vùng chọn và tô màu nó bằng màu nâu (# 614717).

Bước 28 — Thay đổi Blend ing Mode

Bây giờ, nhóm layer đã chọn với Text. Để thực hiện điều đó, đặt layer này bên trên layer text &nhấn Ctrl Alt G để nhóm layer bên trong text layer. Khi chúng ta đã hoàn thành, vào layer blend ing mode & chọn “Color Dodge”

Bước 29 — Xóa các góc

Chọn Eraser tool (E). Chọn một vài Brush tròn, mềm và thiết lập Mas ter Diam e ter lên 100px. Xóa các góc của Shape này. Xem hình bên dưới.

Bước 30 — Bổ sung thêm Stroke Path

Tiếp tục bổ sung thêm Stroke Path bằng cách làm theo các bước 22–25.

Bước 31 — Thêm Stroke Path tới chữ “F”

Chúng ta tập trung vào chữ “F” một lần nữa. Làm theo các bước 22–25 một lần nữa để thêm Stroke Path cho chữ cái đó.

Bước 32 — Tạo Spot light trên Background

Trong các bước sau, chúng ta sẽ tập trung làm việc trên Back ground. Bạn sẽ thêm ánh sáng bên dưới các chữ cái. Để thực hiện điều đó, chọn Brush Tool (B). Chọn Brush tròn mềm và thiết lập Mas ter Diamter lên 300px. Chọn màu lam (# 546876). Tạo một layer mới bên dưới các layer với text và vẽ một chấm lớn. Bạn có thể xem những gì tôi đã làm trong hình bên dưới.

Bước 33 — Chuyển đổi Dot

Nhấn Ctrl+ T và chuyển đổi layer sang shape, chúng ta có thể thấy bên dưới. Nhấn Enter.

Bước 34 — Thêm Shadow

Tạo một layer mới bên dưới các layer với text. Nhấn Ctrl+ nhấp chuột lên Thumb nail của layer với chữ “F” để tạo mask của layer đó. Sau đó, nhấp chuột lên layer mà bạn vừa tạo ra và Grab Gra di­ent Tool (G). Chọn màu đen và tô màu mask với nó.

Sau đó, nhấn Ctrl+ T và chuyển đổi layer này với các chữ cái như trong bức tranh bên dưới. Nhấn Enter.

Bước 35 — Thêm Gauss ian Blur

Shadow nên có nhiều Blur để trông hiện thực hơn. Để chỉnh sửa nó, vào Menu» Fil ter Blur> Gauss ian Blur … và thiết lập Radius trên 5.0px. Bấm OK.

Bước 36 — Tạo Star Glow

Trong bước này, bạn sẽ thêm Star Glow. Thực hiện điều đó bằng cách chọn Pen Tool ℗ và tạo một path như bạn thấy trong hình bên dưới. Nhấp chuột phải lên màn hình và chọn Stroke Path… Chọn option Brush và kiểm tra Box Sim u late Pres sure. Nhấn OK.

Bước 37 – Sao chép Star Path

Chọn Path, và nhấn Ctrl + J để sao chép nó. Nhấn Ctrl+ T và xoay nó. Lặp lại cho đến khi bạn có được Star tương tự như hình bên dưới.

Bước 38 — Điều chỉnh Star Direction

Bây giờ, chọn tất cả các layer Star. Nhấn Ctrl + T và xoay nó để nó có cùng hướng với chữ “X”. Xem hình ảnh dưới đây.

Bước 39 – Định vị Star

Bước 40 — Thêm Particles

Bây giờ, bạn sẽ thêm một số hạt gần các ngôi sao. Chọn Brush Tool (B) và làm theo các cài đặt bên dưới (nếu bạn không biết vị trí của Palette này ở đâu, bạn chỉ cần nhấn F5).

Bước 41 — Thêm Semi Trans par ent Screen – màn hình bán trong suốt

Down load smoke brush (Real Smoke (675 pix els) và cài đặt nó vào Pho to shop. Chọn Brush hiển thị trong hình bên dưới.

Bước 42 — Đặt Brush

Bước 43 — Thêm màu sắc

Tạo một layer mới phía trên layer trên màn hình. Nhấp chuột phải lên layer mới và chọn option Cre ate Clip ping Mask. Chọn Brush Tool (B), và thay đổi Mode sang Color và tô màu để có được kết quả tương tự như trong = # 0a5689, Vàng = # ffd44e, Lục = # c2e01f.

Chọn Move Tool (V) và định vị trên màn hình và layer với các màu sắc đằng sau Text. Xem hình bên dưới.

Bước 44 — Sao chép & Chuyển đổi

Sao chép layer với màn hình và màu sắc, Flip nó. Để thực hiện điều đó, vào Edit > Trans form Flip Hor i zon tal và sau đó, Edit > Trans form > Flip Ver ti cal. Định vị các layer này bên phải của hình ảnh… Xem hình bên dưới.

Bước 45 — Thay đổi màu sắc

Bây giờ, thay đổi màu sắc trên màn hình bên phải. Nhấp chuột lên layer với các màu sắc và nhấn Ctrl+ U để kích hoạt Hue/Saturation adjust ment. Làm theo các cài đặt bên dưới.

Bước 46 — Thêm Par ti cles– các hạt

Bây giờ, chúng ta sẽ thêm Par ti cle bên trên màn hình. Tạo một layer mới. Chọn Pen Tool ℗ và tạo một Path như bạn có thể thấy trong hình bên dưới.

Bước 47 — Cài đặt Brush

Bước 48 — Định vị các Particles

Sau khi bạn thực hiện xong các cài đặt Brush, chọn Pen Tool ℗ một lần nữa. Nhấp chuột phải lên màn hình và chọn Stroke Path. Chọn option Brush và kiểm tra box Sim u late Pres sure. Nhấn OK.

Bước 49 — Sao chép và chuyển đổi các Particles

Sao chép các Par ti cle và Flip chúng theo chiều ngang và theo chiều dọc. Đặt chúng bên phải của màn hình.

Bước 50 — Thêm Shadow vào Screen

Bây giờ, bạn sẽ thêm một số Shadow vào Screen. Chọn cả 2 layer với màn hình và sao chép chúng. Nhấn Ctrl+ T và chuyển đổi chúng như trong hình dưới đây. Ctrl+ nhấp chuột lên layer mới để kích hoạt mask, và vào Edit > Fill… (hoặc nhấn Shift+ F5) và tô màu nó bằng màu trắng.

Bước 51 — Thêm Gauss ian Blur

Bây giờ, bạn cần thêm Blur cho shadow. Vào Menu> Fil ter> Blur> Gauss ian Blur … và thiết lập Radius lên 1px. Bấm OK.

Kết quả cuối cùng

Đây là thiết kế của hình nền mà chúng ta vừa tạo ra. Cảm ơn bản rất nhiều vì đã đọc hướng dẫn này. Tôi rất hy vọng nó sẽ hữu ích đối với bạn.