Hướng Dần Thiết Kế Trang Web 2.0 trong Photoshop (phần 1) Trong hướng dẫn này, bạn sẽ học từng bước, từng bước cách làm thế nào để tạo một layout web tuyệt đẹp và rõ ràng. Bạn sẽ sử dụng một số kỹ ứiuạt từ cơ ban cho đến trùng cấp để xây dựng “Web 2.0" kiểu dáng đẹp, sử dụng Grid System 960. Đây là một series cổ hai phần sẽ trình bày cho bạn cách làm thế nào để tạo layout trong Photoshop, sau đó làm thế nào để chuyển đổi các tiêu chuẩn phù hợp với (X) HTML của thiết kế web. Kết quả Nhấp vào hình ảnh dưới đây sẽ đưa bạn đến Phiên bản đầv đủ của layout mà chúng tôi sẽ thiết kế trong hướng dẫn này. HOME ÄBOUT WORK CONTACT ■ d"w«tSS£ •< ỈÌ. ■ ■ In IS. «Uni^-nr !*- JUU^ J N e e d w e S O 'V m o r e ? ỉmáMt m • Vwi ỦMtp. m Bal ■owoinr r t w nd naawjre rv^ijvuwitWi txtfon g rf* I .o w i r ftáMtaqrmcni ‘Ifv trrrn amạ HMoga li Ễ B l i ó l lr ự i C Â ỈM ^ l l ^ l t M c r r a ỉ GW 4>auN3 MT* IB# IMM ar.raa<rwTi irvfi/anaiti” r S ig nU » f& r 0 MIT M M im iy u n w ts m r ■ ■ ■ GO ( $ 1 8 0 0 .1 9 8 .8 8 7 8 Thiết lap document 1. Tạo một document mới ừong Photoshop với kích thước 1200px X 105ỏpx. N in e ; ịư n trtle d -i Pre$ệt Size; W idth: 1200 H él g ht: 1Ö50 Resoîucfcort: 72 B ackground Contenus: While ▼ A dv an ced New jTJ ôtesls pixels Cofor Mode: RCB Color s bit pixeU/irtch jiü| g ti Delete Preset Device C entral Im age Size 3.60M Creating the background ịtạo background) 2. Bây giờ, chúng tôi sẽ tạo background. Chọn Gradient Tool (G). Hãy chắc chắn đó là bộ Linear Gradient. Thiết lập foreground color #ale8fe và background color #59d3fa và tạo ra một gradient như dưới đây: Đặt Grid System vào document 3. Trên một layer mới, tạo một grid rộng 960px gồm 12 thanh, mỗi thanh rộng 60px. Đặt mỗi thanh cách nhau 20px. Đặt grid này ở chính giữa của document. Các grids này nên dùng như bảng chỉ dẫn của bạn và nên nhớ rằng các yếu tố thiết kế của bạn không được vượt quá chiều rộng của grid này. Vào trang 960 Grid System site để biết thêm thông tin, hoặc down load the Grid system here. Tạo ra các container cho các ỉogo và các navigation item 4. Bây giờ, chúng tôi sẽ tạo ra các container cho logo và các navigation item. Để tạo các container, sử dụng Rmraded Rectangle Tool với Shape Layers đã được lựa chọn. Thiết lập bán kính ìopx. * d 1 JIJJ □ Ị __ ị Rectangle Tool L' ■ G Raurd-Ễd Pl&ciariçlê Tc-3 L I^ J Ellipse Tûû. u A ,'^y Poivgon Tocsl u ạ Line Too, u Custom ShapeT-ool u ■1 T T Í f i Photoshop File 5. Tạo một hình chữ nhật ừòn rộng 300px. Tạo một hình chữ nhật ừòn thứ hai rộng 620px; chủng được đặt trên grid như sau: 6. Áp dụng các thiết lập Layer Style cho mỗi hình chữ nhật tròn: L a y e r S t y le y Oip 'A ttvn í*jjjpv ûww-r Ck»- I VVM Cdr, Ehi iM tm u _ tonw»' >x lL r* 5J i«jn Com Cviuy MẠ £» id*ni X. _ Pritrn övntor SteB» ịỊỊ PHOU ũw cm» ìỉuas* °* > ( Cantil ) Mgw Style.,, ? Pñtyújvy C rid ii 'i! Ẽđ icor IglftîvtMé— jj h w rl M » nw&n ***rCmrn W i - W I rô«» ỉmm> ttrw*m •ra^QWMb liMfc* “nvrr - i’i*“ c w * Ị W _ 5j M - 0 ® fc'fäi 1* !» 1* £ <K , Cjn«i Ỉ " "’S * sjivtvira □ P ritéM 4 ^ I ^ ri r ¿■ ý v . y ' f. “ _3 r t w i ï ' j I«« Piimr CutMRi C f i J i m fy p* k w ___ NtVd innootfv'»«: Ị ¡00 * ỊI * * ã Ĩ Stops eaKinr, ; « UUIMP-I 1» mir I CiHW ' lot H O T I ]s I D»r«rt* Ì Đây giờ hình chữ nhật ừòn của bạn ừồng như thế này: Thêm logo và text cho navigation 7. Để tạo các navigation items, sử dụng Type Tool (T). Sử dụng màu sắc #5f5f5f. Trong trường hợp này, tôi sử dụng font chữ Rockwell. Add các navigation items cho hình chữ nhật thứ hai và logo của công ty (hiện tại logo đang sử dụng chi ỉà một cái tên hư cấu cho một tồ chúc thiết kế). b i W t l AVil HOME ABOUT WORK CONTACT Tạo các kỷ hiệu phân cách cho các navigation items 8. Trên một layer mới, hãy add một ký hiệu phân cách ở giữa mỗi một navigation item. Ở đây tôi thêm một line với color #dedede. OME ABOI 9. sao chép ký hiệu ngăn cách. Sử dụng Layer> Layer Style> Blending Options> Color Overlay và thay đổi màu của bản sao Di chuyển bản sao một pixel qua bên phải. Điều này sẽ tạo ra một hiệu ứng chạm khắc tình tế. Tao header 10. Bây giờ hãy tạo header phía dưới logo và thanh navigation. Sử dụng Type Tool (T), và add khẩu hiệu công ty và một bài giới thiệu ngắn gọn phía dưới. Sau đó, hãy add một Drop Shadow nhẹ để làm cho kích thước của nó lớn hơn. HOME ABOUT WORK C We buil blow you away. Here at Creative, we build state-of-the-art and cost-effective websites. 11. Để lấp đầy khoảng trống bên cạnh khẩu hiệu, add một hình ảnh của một máy tính hoặc một laptop. Bây giờ, đây ỉà những gì bạn cần phải cố: mow you away. Here at Gieatiro, we build state-of-the-art and costeiiective websites- Hướng Dan Thiết Kế Trang Web 2.0 trong Photoshop (phần 2) Tạo một button tròn 12. Dưới đây là một bài giới thiệu ngắn gọn, với việc sử dụng Rounded Rectangle Tool, bán kính 28px 28px, tạo ra một button gọi là“Learn More”. Điều này là rất hữu ích nếu người dùng muốn tìm hiểu thêm về công ty của bạn, thông tin này được tiếp cận một cách dễ dàng. LEARN MORE ^ Ầ Áp dụng một Gradient Overlay cho button bằng cách sử dụng các cách thiết lập ở ừền với # 086da0 màu củã bottom và #23a7ea. Tạo một call-to-action box 13. Sử dụng Rounded Rectangle Tool một lần nữa với bán kính 16px, tạo ra một hình chữ nhật 300px. Vào Blending Options và add một Drop Shadow vai cac gia tri giong nhir Buac 6. 14. Chon hinh chu nhat chung toi vira tao ra (Cmd / Ctrl + Click) va tao mot layer moi phia tren hinh chu nhat nay. Add anh sang mau xanh (#96e3fc) de gradient trong suot tren hinh chu nhat. 15. Di chuyen gradient pixel nky len. C6 the mat mot phut nhung dimg quan tam den dieu do. B&ng cach nao do hay 1km cho n6 trong kh&c biet mot chut. [...]... canKflf vftvis-pztbOT syttKm* M D*>J Last but not /easf the footer 19 K tip, chỳng ta to footer, ni cú th add bn quyn v cỏc thụng tin liờn lc cho trang web i â 1 80 0.198.8878 Icing on the cake: creating the diagonal lines 20 To mt document mi trong Photoshop vi kớch thc 25px X 25px v ton b document vi mt black background(#000000) New Name: U ntitled-1 Preset: Custom ợ > Size: T! Width; 25 Height... Move hght blue to transparent gradient one pixel up Phỏc tho mt cal-to-action button 16 Box ny s dựng nh mt call-to-action button in ny rt hu ớch nu bn mun ngi dựng tỡm kim thụng tin quan ng n ton b trang web ca bn ch ong nhỏy mt Hóy add heading, mt vi mụ t, v mt icon cho cỏc button Cỏc icon nh cú th mang li sc hp dn hn cho thit k ca bn Chng cng giỳp ngi dựng nhanh chng tỡm thy nhng gỡ h ang tỡm kim... Overlay v Opacity ca nú l 4% HOME ABOUT WORK e build websites that blow you away Hera- at C reative we build sisie-af-thp-art T>d ccBi-dlecUrc ôvcbMlea LEAHM MQ-RE 1 CONTACT E K h R J n i l n n Jr ằ -ằ |d H m 25 S dng ty, xúa thụng thng t bottom ln top, xa b khong 6 0 % cỏc ng chộo lm cho nú ụng nh th ny: C I U i A i v U 26 Voila! Chung toi da c6 mot Web 2.0, rat ro r&ng, v&dep rmit! H OM E v n k . costeiiective websites- Hướng Dan Thiết Kế Trang Web 2. 0 trong Photoshop (phần 2) Tạo một button tròn 12. Dưới đây là một bài giới thiệu ngắn gọn, với việc sử dụng Rounded Rectangle Tool, bán kính 28 px 28 px,. các thông tin liên lạc cho trang web. i . © 1 800 .198.8878 Icing on the cake: creating the diagonal lines 20 . Tạo một document mới trong Photoshop với kích thước 25 px X 25 px và toàn bộ document. black background( #00 000 0). New Name: Untitled-1 Preset: Custom î > Cancel Size: T ! Save Preset Width; 25 pixels Delete Preset Device Central Height 25 pixels Î 1 Resolution: 72 pixels/ĩnch