Thứ Sáu, 3 tháng 4, 2015

Thiết kế một bản layout trong suốt bằng photoshop

Bước 1
Cho phép bắt đầu bằng cách tạo ra một tài liệu mới 2000x2000px.
Bước 2
Sử dụng công cụ marquee, tạo một hộp 500px, rộng 1500px cao. Điền với màu đen
Bước 3
Tới Edit> Define Brush Preset . Thay đổi tên thành "Square Brush" và nhấn ok. Bây giờ chúng ta cần phải có lông của chúng tôi với các phần còn lại của bàn chải.
Bước 4
Đóng các tài liệu 2000x2000px, bởi vì chúng tôi đang thực hiện với một. Bây giờ mở một tài liệu mới 1200x1200px và điền với màu đen.
Bước 5
Tạo một layer mới ( Ctrl + Shift + N ) và điền nó với màu đen cũng có.
Đi vào Filter> Render> Fibers . Điều chỉnh các thiết lập như tôi có để có được một sự tương phản thực sự tốt.
Bước 6
Bây giờ Đi vào Filter> Blur> Motion Blur và điều chỉnh các thiết lập để 999px.
Sử dụng công cụ chuyển đổi ( Control + T ), giữ phím Shift và xoay sang bên trái một chỗ.Căng ra các sợi để nó bao gồm toàn bộ khu vực.
Bước 7
Mở Levels ( Ctrl + L ) và điều chỉnh chúng như tôi vậy. Điều này sẽ tối đen sợi của chúng tôi.
Bước 8
: Thay đổi chế độ hòa trộn của các sợi layer là Color Dodge.
Bây giờ chọn brush chúng ta thực hiện, sau đó đẩy F5 để mở ra các cài đặt brush của chúng tôi.
Thay đổi các thiết lập như tôi có chúng.
Bước 9
Tạo một layer mới ( Ctrl + Shift + N ), và di chuyển nó theo các lớp sợi.
Chọn một màu xanh và sơn một khu vực nhỏ với một brush. Kể từ khi chúng ta thay đổi thiết lập của chúng tôi bàn chải, bàn chải, chúng tôi làm nên được rải rác giống như những gì tôi có.
Bước 10
Tới Filter> Blur> Motion Blur với khoảng cách tại 999 px.
Bước 11
Lặp lại bước 9 và 10 với các biến thể khác nhau của màu xanh, tạo một layer mới cho mỗi màu sắc, cho đến khi bạn có được một cái gì đó mà bạn thích.
Bước 12
Tạo một layer mới bên dưới layer sợi. Nhấn vào gradient và chọn công cụ Gradient phản.Hãy chắc chắn rằng màu trắng là không có gì.
Nhấp và kéo gradient ở giữa các tài liệu, sau tuyến của sợi.
Thay đổi chế độ hòa trộn là Overlay và giảm Opacity xuống 60% . Điều này sẽ cung cấp cho chúng ta một nguồn ánh sáng ở giữa của tài liệu.
Đây là sản phẩm hoàn thiện của nền của chúng tôi. Bây giờ chúng ta sẽ bắt đầu vào đặt cùng các trang web thực tế.

Website

Bước 13
Trước khi chúng tôi nhận được thêm nữa tôi sẽ mất tất cả các lớp từ nền của tôi và đặt chúng vào một thư mục để giữ cho nó có tổ chức.
Nhấp chuột vào layer background, sau đó nhấp và kéo một hướng dẫn ra giữa các tài liệu.Các hướng dẫn nên gắn vào vị trí ở giữa. Nếu nó không đi xem và chắc chắn Snap được kiểm tra.
Sử dụng công cụ Marquee tạo một hộp 960x1200px. Chúng tôi sẽ di chuyển nó qua bằng cách sử dụng công cụ chuyển đổi ( Control + T ) để có được những điểm neo trên các góc và giữa của hộp. Đường lên các điểm neo giữa với hướng giữa. Đặt một hướng dẫn trên mỗi bên của hộp.
Bước 14
Sử dụng công cụ marquee tạo một 375x60px hộp và nghỉ ngơi ở phía bên phải của nó về hướng bên phải và phía trên trên đầu của tài liệu. Giữ phím Shift và di chuyển nó xuống sáu lần. Đặt hướng về phía trên, phía dưới và bên trái.
Sử dụng Rounded Rectangle Tool, tạo một hộp bên trong hướng dẫn, với bán kính 10px.
Chúng tôi sẽ bổ sung thêm một số phong cách layer hộp, vì vậy đi vào biểu tượng đầu tiên ở dưới cùng của bảng layer, và click vào Inner Glow. Thay đổi các thiết lập như tôi có họ với màu # 666666 , sau đó click vào Stroke với màu # 000000 .
Bước 15
Kích vào công cụ marquee. Bây giờ Điều khiển và nhấp vào hình dạng chúng ta chỉ cần thực hiện. Giữ phím Shift và di chuyển hình lên ba không gian. Sử dụng một gradient tuyến tính điền vào các khu vực có màu trắng. Thả Opacity xuống 60% .
Bước 16
Tạo một layer mới và thay đổi màu foreground # 3399FF . Control + nhấp vào hộp. Bây giờ, sử dụng gradient tuyến tính một lần nữa, tạo ra một gradient màu xanh ở phía trên của hộp.
Bước 17
Đỗ Control + Shift + I để đảo ngược vùng chọn, sau đó chọn layer gradient trắng và xóa.Điều này sẽ loại bỏ được phần mở rộng mà không cần.
Bước 18
Sử dụng Myriad Pro Black lúc 16 pt gõ ra hướng của bạn trong trắng.
Sử dụng công cụ marquee vuông nhấp chuột và kéo một hộp 1px rộng và chiều cao của hộp. Điền nó với # 333333 . Di chuyển vùng lựa chọn một chỗ và điền nó với màu # 000000 .
Bước 19
Lặp lại bước 18 để có một break ở giữa mỗi nút. Đặt tất cả các lớp chuyển hướng vào một thư mục.
Bước 20
Chúng ta sẽ tạo ra cơ thể của trang web của chúng tôi. Sử dụng công cụ marquee tạo một 960x970px hộp và nghỉ ngơi trên cùng của hộp trên dưới cùng của thanh điều hướng của chúng tôi. Giữ phím shift, và di chuyển nó xuống ba không gian. Đặt một hướng dẫn trên đỉnh và đáy của vùng chọn.
Sử dụng công cụ Rounded Rectangle Tool, tạo một hộp trong những hướng dẫn cũng như những người xa bên trái và bên phải.
Nhấp và kéo layer style từ hộp chuyển hướng vào các hộp website.
Bước 21
Grab một logo và đưa nó vào tài liệu của bạn. Đường dây lên phía bên trái của biểu tượng với các hướng dẫn bên trái.
Bước 22
Sử dụng công cụ marquee tạo một 600x240px hộp và đặt hướng dẫn xung quanh nó như chúng ta đã làm với các menu và hộp website. Sử dụng các công cụ hình chữ nhật làm cho một hộp trên các hướng dẫn chúng ta vừa tạo. Cho nó phong cách layer giống như chuyển hướng, điền vào nó với màu trắng và giảm opacity xuống còn 20% .
Đặt hộp trắng vào một thư mục mới có tên gọi "Post 1".
Để thêm sự phản xạ, sử dụng công cụ Ellipse để tạo ra một hình bầu dục trên nửa dưới của hộp. Kiểm soát và click vào vòng tròn và sau đó làm Control + Shift + I để có được sự lựa chọn ngược. Chọn gradient tuyến tính với màu trắng để không chọn gì cho màu sắc. Nhấp và kéo một gradient.
Một khi bạn nhận được một gradient bạn muốn làm Control + Shift + I và xóa các khu vực phụ.
Bước 23
Chúng ta sẽ đi và lấy hình ảnh máy tính xách tay này (http://www.sxc.hu/photo/1185958)from Stock.xchng.
Mở nó trong Photoshop và bấm vào Crop Tool của bạn. Điều chỉnh các thiết lập để nó là 200x200px ở 72 pixels / inch.
Mang nó vào tài liệu của chúng tôi.
Bước 24
Đặt bức ảnh ở phía trên bên trái của hộp bài, sau đó giữ phím Shift, di chuyển ảnh xuống hai lần và bên phải hai lần.
Chúng tôi cũng sẽ bổ sung thêm một số phong cách layer. Vì vậy, hãy nhấp vào biểu tượng phong cách layer và nhấp chuột vào đột quỵ. Thay đổi các thiết lập giống như những gì tôi có, với một màu trắng. Bây giờ thêm một bóng thả.
Bước 25
Bây giờ cho phép đưa vào một số bản sao giả:
Etiam ultricies tạm thời Lorem ipsum dolor sit Amet, consectetuer adipiscing elit. Aenean COMMODO ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et Magnis dis vừa nghĩ đến Montes, nascetur ridiculus mus. Donec felis quam, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis Enim. Donec pêđê Justo, Fringilla vel, aliquet nec, vulputate eget, arcu. Trong Enim Justo, rhoncus ut, imperdiet một, venenatis vitae, Justo. Nullam châm ngôn felis eu pêđê mollis pretium. Tincidunt Integer. Cras dapibus.ac, Enim. Tiếp tục ...
Các "Etiam ultricies tạm thời" sẽ là tiêu đề của chúng tôi. Arial / Helvetica Bold tại 32 pt.Phần còn lại của bản sao sẽ được Verdana tại 11pt. Các màu sắc của "tiếp tục" sẽ được # 3399FF .
Bước 26
Kích chuột phải vào "Đăng 1" thư mục Duplicate Layer Set và gọi nó là "Bài 2". Đặt phần trên của bài thứ hai trên dưới cùng của bài viết đầu tiên và sau đó giữ phím Shift và di chuyển "Post 2" xuống hai không gian.
Bước 27
Lặp lại bước 26 cho bài viết thứ ba và thứ tư. Đối với các bài nhấp chuột thứ tư "Đăng 4" thư mục, sau đó nhấp chuột vào layer mask (biểu tượng thứ hai từ bên trái trên bảng layer).Sử dụng các công cụ marquee để tạo ra một hộp xung quanh các khu vực của bài thứ tư là trên hộp website. Giữ phím Shift và di chuyển hộp marquee lên hai không gian. Sau đó làmControl + Shift + I để đảo ngược vùng chọn và tô với màu đen.
Bước 28
Bây giờ chúng ta hãy làm cho các bên. Sử dụng công cụ marquee vuông làm cho một hộp 300px rộng và đặt nó trên hướng dẫn bên phải. Giữ phím Shift và di chuyển nó trong hai không gian. Đặt một hướng dẫn trên bên trái và bên phải của vùng chọn hình vuông.
Bước 29
Sử dụng công cụ hình chữ nhật làm cho một hộp trong hướng dẫn chúng ta chỉ cần thực hiện. Hãy chắc chắn rằng dòng hộp lên với đầu hộp bài ở phía trên và nó đi dưới đáy hộp trang web ở phía dưới.
Hộp sidebar sẽ có màu trắng và có phong cách layer giống như các hộp bài.
Bước 30
Kích vào biểu tượng mặt nạ trên bảng lớp. Với các công cụ marquee vuông, tạo ra một hộp bao gồm các sidebar từ dưới cùng của tài liệu để dưới cùng của hộp website. Giữ phím Shift và di chuyển vùng chọn hình vuông lên hai không gian. Điền vào các khu vực có màu đen. Điều này sẽ giúp loại bỏ lượng tích thêm.
Bước 31
Chúng ta muốn thêm một sự phản ánh như chúng tôi có trên bài viết. Để làm điều này chúng ta phải nhân đôi layer với Control + J và di chuyển nó qua phía trên hộp sidebar. Kiểm soát và nhấp vào hộp bên, sau đó Control + Shift + I để nghịch đảo, và xóa các khu vực phụ.
Đối với thanh tìm kiếm làm cho một hộp màu trắng với các công cụ marquee vuông. Các kích thước của hộp là có được 260x30px và nó sẽ được đặt ở phía trên bên trái của thanh bên. Giữ phím Shift và di chuyển nó qua hai không gian bên trái và hai không gian xuống.
Hộp tìm kiếm là sẽ có phong cách layer giống như hộp sidebar.
Sử dụng các công cụ văn bản tạo ra một số văn bản nói là "Tìm kiếm" với 16pt Verdana và màu sắc của #CCCCCC .
Bước 32
Bây giờ chúng ta sẽ đưa vào một số quảng cáo. Các quảng cáo này là 125 × 125 và sẽ đi hai không gian xuống, giữ phím Shift và hai không gian từ các cạnh.
Phía dưới hai sẽ được giữ Shift và xuống một không gian từ dưới cùng của quảng cáo hàng đầu.
Trong khi bạn đang ở đó đặt một hướng dẫn trên bên trái và bên phải của quảng cáo.
Bước 33
Kích vào công cụ Rectangle Tool và trong các tùy chọn, kích vào mũi tên xuống ở bên phải của tất cả các hình dạng khác nhau. Nhấn vào kích thước cố định, và thay đổi nó để 260x30px. Đặt hình chữ nhật nên đầu được chạm vào đáy của các quảng cáo, và giữ phím shift di chuyển xuống hai không gian.
Thay đổi màu sắc sang màu trắng, ở 20% opacity
Bước 34
Bây giờ để có được sự phản xạ, Control và nhấn vào hình chữ nhật, chúng tôi chỉ cần thực hiện. Đẩy Control + Shift + N để có được một lớp mới. Bây giờ hãy nhấp vào công cụ marquee vuông và di chuyển vùng lựa chọn của chúng tôi lên để phía dưới là ở giữa của hình chữ nhật.
Điền với một màu trắng để không có gì gradient tuyến tính.
Bước 35
Gõ "Liên kết liên quan" với phông chữ, Myriad Pro Black, và kích thước của 16 pt.
Chúng tôi sẽ cung cấp cho nó một cái bóng nền nhẹ để làm cho nó nổi bật hơn một chút.
Bước 36
Đối với các liên kết chúng tôi chỉ là đi để sử dụng các liên kết WordPress chung:
Plugins Tài liệu Phát triển blog Đề nghị Ý tưởng Hỗ trợ diễn đàn Themes Web Hosting WordPress Planet WordPress Themes 
Các văn bản là có được màu trắng 12pt Verdana. Chúng tôi sẽ giữ phím Shift và di chuyển nó trong hai xuống một từ "Liên kết liên quan" đầu.
Bước 37
Để có được những viên đạn mũi tên, chọn công cụ hình dạng tùy chỉnh (cùng một nút trên thanh công cụ như công cụ hình chữ nhật) và chọn vào mũi tên giống như tôi đã làm.
Thay đổi màu sắc để # 3399FF và thêm một Bevel and Emboss từ biểu tượng phong cách layer.
Bước 38
Lặp lại bước 37 và 38 trừ tiêu đề của chúng tôi là có được "Categories" và cho chúng tôi giả lập chúng ta sẽ chỉ cần đặt:
Category Number One Category Number Two Category Number Three Category Number Four
Bước 39
Lặp lại bước 37 và 38 trừ tiêu đề của chúng tôi là có được "lưu trữ" và cho chúng tôi giả lập chúng ta sẽ chỉ cần đặt: 
Tháng 3 năm 2009 Tháng Tư 2009 Tháng Năm 2009 Tháng Sáu 2009 Tháng 7 năm 2009
Bước 40
Chúng tôi muốn thêm một ánh sáng màu xanh trên hộp trang web như chúng tôi có trên thanh điều hướng. Để làm được điều này và nhấp vào hộp trang web và tạo ra một layer mới với Control + Shift + N .
Sử dụng linear gradient nhấp chuột và kéo một # 3399FF gradient từ trên xuống.
Bước 41
Cuối cùng, chúng tôi sẽ đưa vào thông tin chân trang của chúng tôi. Giữ phím shift và di chuyển chữ chân xuống hai không gian.

Sau cùng

Dưới đây là phiên bản cuối cùng. Phần tuyệt vời về làm việc với một trang web trong suốt là bạn có thể thay đổi hình nền để thay đổi hoàn toàn giao diện của trang web của bạn.

Chúc các bạn học tốt.

Các bạn có thể tham khảo các khóa học đồ họa tại đây :
Tin mới : Các khóa học đồ họa ưu đãi tháng 4 :


Không có nhận xét nào:

Đăng nhận xét