Những quy tắc vàng về kết cặp font trong thiết kế

Chọn lựa font chữ và kết cặp các font thế nào cho hợp lý (typography trong nghĩa hẹp của nó) có lẽ là một trong những vấn đề làm đau đầu nhiều dân đồ họa nhất bởi đó là một trong những yếu tố quyết định một thiết kế đẹp hay xấu. Để làm tốt việc này, nhà thiết kế cần có óc thẩm mỹ, kinh nghiệm, bản năng và nhiều nhiều thứ khác, phần lớn trong số đó thuộc về phạm trù năng khiếu. Tuy nhiên, một trong những thứ liên quan lại có thể dạy được, đó là các quy tắc và kỹ thuật kết cặp font được nhiều chuyên gia lấy làm kim chỉ nam. Với các quy tắc này, không chỉ anh em chuyên nghiệp, mà cả những người nghiệp dư tập tành chơi Photoshop hay thậm chí anh em văn phòng trình bày văn bản hoàn toàn có thể ứng dụng và làm cho tác phẩm của mình đẹp hơn.

Quy tắc 1: Chỉ dùng nhiều nhất 2 font, trong số ít trường hợp có thể dùng 3 font

Đây có lẽ là quy tắc phổ biến nhất giúp cải thiện hầu hết các thiết kế. Lý do giải thích cho nguyên tắc này là nếu bạn dùng nhiều hơn hai font, thiết kế của bạn thường sẽ trở nên thiếu rõ ràng, rối rắm và hỗn loạn. Trong khi nếu dùng hai font thôi, tính rõ ràng trong thiết kế của bạn sẽ giúp người đọc nắm bắt nội dung nhanh hơn và biết rõ mục nào chính mục nào phụ, hay cái nào cụ thể, cái nào tổng quan.

Cụ thể, với hai font, chúng ta nên dùng một font cho các tiêu đề chính, tiêu đề con, các đề mục nhỏ... trong khi font còn lại thường dược dùng cho phần nội dung (body), nên nhớ font body sẽ là font dùng cho phần lớn văn bản trong thiết kế của bạn.

Quy tắc 2: Hai loại font thường đi đôi cùng nhau: Serif và Sans Serif

Một trong những kỹ thuật giúp việc kết cặp font thành công đó là cho một anh serif đi cùng với một nàng sans serif. Nếu bạn không chắc “ai là ai” thì lưu ý là anh serif có “chân” (xem hình trên) trong khi nàng sans serif thì không. Ở ví dụ trên, Georgia là một font serif và Helvetica Neue thuộc loại sans serif. Sự kết đôi giữa hai cặp font này sẽ khiến bản thiết kế của bạn trở nên đẹp hơn, lý do là bởi chúng đủ khác để giúp người đọc phân biệt tiêu đè và nội dung cụ thể với nhau. Khi dùng cặp đôi này, bởi đặc điểm của loại serif giúp người đọc dễ theo dõi các đoạn block văn bản dài, serif thường phải “lao động cực nhọc” hơn (coi nó là đàn ông cho dễ nhớ!) lo đảm nhiệm phần nội dung (body). Trong khi nàng sans serif sẽ lãnh nhận các phần tiêu đề/đầu đề.

Quy tắc 3: Không nên chọn các font quá giống nhau

Một quy tắc khác nên nhớ là không nên chọn các font quá giống nhau. Đứng ở góc độ người đọc tất nhiên bạn sẽ không muốn người thiết kế/trình bày bắt bạn phải căng mắt ra để phân biệt sự khác nhau giữa hai loại font phải không? Việc đó sẽ phá vỡ tính rõ ràng và hạn chế người đọc tiếp cận nội dung trình bày do người đọc không thể lướt nhanh nắm tổng quan văn bản của toàn bộ thiết kế được.

Trong ví dụ trên, như các bạn thấy font Palatino và Times New Roman khá giống nhau, nếu nhìn từ xa các bạn sẽ khó phân biệt chúng. Trái lại, chỉ nhìn lướt qua thôi bạn đã thấy sự khác biệt rõ ràng giữa Palatino và Century Gothic ở phía phải bức hình trên.

Đối với những người đã quen với các font chữ thì tốt nhất là không nên chọn các font trong cùng một họ. Ví dụ, bạn sẽ không muốn cùng sử dụng hai font họ slab serif như Arvo và Clarendon (hình dưới, trái là Arvo, phải là Clarendon) bởi lẽ sự giống nhau trong dạng “chân” (serif) của chúng (do cùng một họ slab serif). Lời khuyên này cũng được áp dụng đối với việc chọn các font có cùng độ mảnh, độ đậm nhạt, hay là cùng kiểu chữ viết.

Quy tắc 4: Kiểm tra x-height của các font và đảm bảo chúng tương thích với nhau

X-height của font chính là độ cao giữa phần dưới và phần trên của chữ viết thường (ví dụ như chữ a, o, u, c, …) mà không tính phần kéo dài xuống dưới (như ở các chữ như p, q...) hay phần mở rộng lên trên (như ở các chữ h, k, t, d, …). Theo quy tắc này, x-height của các font bạn chọn phải tương thích với nhau, tức chúng phải không quá khác nhau về lượng và hiệu ứng tác động lên thị giác. Nhìn chung, các font có x-height tương thích phải khiến cho văn bản trở nên rõ ràng hơn.

Trong thực tế, cách dễ dàng nhất để áp dụng quy tắc trên là chồng chập hai font mà bạn chọn tại cùng một kích thước ký tự (cùng số point chữ) (xem hình), nếu x-height của chúng bằng nhau thì có thể xem là ổn. Trong hình trên, các bạn sẽ thấy cặp Georgia và Impact không phải là một đôi đẹp bởi x-height khác nhau. Trong khi đó, bên phía phải, Arvo và Helvetica Neue cho chúng ta một hiệu ứng thị giác tốt hơn, thoải mái hơn, và dễ nhìn hơn nhiều.

Quy tắc 5: Cố gắng tăng độ tương phản giữa các font

Thông thường các bạn có thể tăng độ tương phản giữa hai font bằng cách chọn một font đậm và tối (dark and heavy) sẵn trong khi font kia dạng bình thường. Khi áp dụng lên văn bản, font đậm sẽ được dùng cho phần tiêu đề và font bình thường cho phần nội dung cụ thể, đó là một cách thực hành tốt hơn cả.

Hãy sử dụng ví dụ về x-height ở trên. Impact là một font đậm trong khi Georgia là một font bình thường. Việc kết đôi chúng nếu xét theo tiêu chuẩn này thì có thể được coi là tốt (giả dụ rằng x-height của chúng giống nhau), Impact sẽ được dùng làm font tiêu đề trong khi Georgia sẽ đảm nhận phần nội dung. Trong khi nếu xét hai font bên phải, Helvetica Neue và Arvo, dù tương hợp về x-height, đáng tiếc thay chúng lại quá giống nhau về độ dày, đậm, và tối. Do vậy nếu xét chung hai tiêu chuẩn thì không có bộ đôi nào trong hai bộ này sẽ được dùng trong thiết kế chính quy.

Lời kết

Như vậy, tóm gọn lại, chúng ta có 5 quy tắc sau:

1. Nên dùng nhiều nhất hai font, trong số ít trường hợp có thể cho phép dùng 3 font.
2. Nên kết cặp font Serif và Sans Serif cùng nhau
3. Đừng chọn các font quá giống nhau về kiểu chân chữ, độ đậm nhạt, kiểu chữ viết...
4. Nên chọn các font có x-height tương thích, dễ nhất là chọn x-height bằng nhau.
5. Cố gắng tăng độ tương phản giữa các font.

Trong khi những quy tắc trên có thể giúp cải thiện việc chọn lựa font của bạn trong thiết kế thì cũng không thừa khi nhắc lại rằng quy tắc tối tổng quát nhất đó chính là làm sao cho thiết kế đạt được mức độ rõ ràng nhất định, thế là đủ. Một trong những cách kiểm tra nhanh là sao chép một đoạn văn nào đó trong bài của bạn có cả phần tiêu đề và nội dung cụ thể sau đó nhờ một người quen (nếu là dân đồ họa càng tốt) xem giúp. Sau khi họ đọc xong hãy hỏi họ những câu hỏi kiểu như “bạn có đọc chúng dễ không?”, “có phải căng mắt đọc không?”, “bạn có thể nói cho tôi biết sự khác nhau giữa hai font trong bài không”, v.v... Nhờ vậy, bạn sẽ đưa ra quyết định cuối cùng cho thiết kế của mình chính xác hơn, bởi xét cho cùng, độc giả chính là người đóng vai trò quyết định cho sự thành công của thiết kế của bạn.

Nguồn (tinhte.vn)

0 nhận xét:

9 điều mà các designer cần tránh khi thiết kế icon

Khi bạn quá tập trung vào thiết kế một icon nổi bật, bạn có thể mắc một số lỗi khá phổ biến. Bài viết này sẽ cực kỳ hữu ích cho tất cả các nhà thiết kế icon, dù mới hay đã có kinh nghiệm, tránh được 9 vấn đề thường gặp để có những icon hiệu quả nhất.

Dưới đây là 9 lỗi phổ biến trong thiết kế icon. Mong rằng bài viết này sẽ giúp ích cho các bạn có thể tạo ra những icon hoàn hảo. Đối với những nhà thiết kế icon đã có kinh nghiệm, đây sẽ là sự tổng hợp những điều mà có thể vài người chưa thật sự chú ý hay chưa áp dụng đúng. Còn đối với các nhà thiết kế mới, đây sẽ là những lời khuyên bổ ích để các bạn tránh mắc phải sai lầm và có những thiết kế icon hiệu quả hơn.

1. Chọn sai vật hay hình ảnh đại diện

Trong khi thiết kế icon, hãy chắc rằng bạn đã chọn đúng hình ảnh đại diện. Nếu chọn đúng, người dùng sẽ dễ dàng nhận ra điều mà bạn muốn thể hiện trong một icon. Icon cần dễ nhận diện, dễ hiểu, đơn giản và đúng mục đích. Vì vậy nếu bạn dùng sai hình ảnh, tất nhiên icon của bạn sẽ không hiệu quả như bạn mong muốn.

2. Sai khi cân nhắc người xem

Điều này rất quan trọng vì khi bạn thiết kế icon, bạn nên đặt mình vào vị trí của người dùng và có những sự giải thích khác nhau cho họ. Hãy nhìn vào truyền thống văn hóa, cử chỉ, biểu tượng của một quốc gia hay sở thích của đối tượng người dùng chính để chọn lựa cách thiết kế cho phù hợp và dễ nhận diện.

3. Sai khi tạo ra những bitmap icon và vector icon

Bạn có thể nghĩ rằng thiết kế và vẽ icon trên raster hay vector là đủ nhưng bạn đã sai. Bạn cũng cần vẽ lại trên bitmap bởi bạn cần làm cho icon nhỏ lại. Vector icon sẽ rất tốt khi được sử dụng với kích thước lớn.

4. Dùng quá nhiều chi tiết

Sử dụng quá nhiều chi tiết trong một icon sẽ khiến nó trông rất phức tạp và khó hiểu, đặc biệt khi ở kích thước nhỏ. Giảm thiểu chi tiết là điều bạn cần nhớ trong thiết kế icon.

5. Thêm chi tiết chỉ để đẹp hơn

Đừng thêm bất cứ yếu tố gì vào icon của bạn chỉ vì tính thẩm mỹ. Bạn có thể sử dụng ánh hiệu ứng sáng hay bóng… thay vì thêm hình dạng, đường nét, đồ vật không cần thiết. Chắc chắc rằng bạn chỉ sử dụng những chi tiết quan trọng chứ không phải những chi tiết mang tính chất trang trí trong icon của mình.

6. Thiết kế giống nhau, dập khuôn

Khi một người thiết kế một gói nhiều icon, anh ấy thường thích tạo ra những thiết kế đồng bộ nhưng thường quên mất rằng chúng vẫn cần có những điểm khác biệt. Người thiết kế cần tinh tế tạo ra những icon mà người dùng hiểu chúng được tạo ra để làm gì chứ không phải tạo ra một loạt những icon “na ná” nhau. Vì vậy, để tránh sự trùng lặp mà lại có được sự đồng bộ khi thiết kế một icon set, bạn nên thống nhất các icon về những yếu tố như phong cách vẽ, bóng, độ dốc, kiểu dáng… hơn là dập khuôn chúng.

7. Dùng màu sắc quá nhạt

Một icon cần phải nổi bật đặc biệt là khi nó được sử dụng trên một màu nền. Để chắc rằng icon của bạn được chú ý đến, bạn nên sử dụng màu đậm.Tránh sử dụng màu đơn sắc hoặc kết hợp màu quá đơn điệu, hãy làm thiết kế icon của bạn tuyệt vời hơn bằng cách kết hợp màu độc đáo nhé

8. Sai về kích cỡ

Đây là một vấn đề thường gặp trong thiết kế icon bởi khi giảm tỷ lệ kích thước xuống mức nhỏ hơn, nhiều icon không giữ được chất lượng như yêu cầu. Một điều quan trọng với icon là chúng phải trông thật đẹp và chuyên nghiệp dưới bất kỳ kích thước, hình dạng hay cài đặt nào.

9. Bỏ qua bước ban đầu

Một vài nhà thiết kế ngay lập tức ngồi vào máy tính và bắt đầu thiết kế icon thay vì phác thảo trước. Điều này thật không nên bởi vì bạn sẽ có nhiều sáng tạo và suy nghĩ kỹ hơn nếu bạn bắt đầu bằng việc phác thảo ra giấy trước ý tưởng của mình. Một quyển nháp và bút chì có thể sẽ là công cụ đơn giản mà hữu ích khiến thiết kế icon của bạn trở nên tuyệt vời.

VÂN CHI - DESIGNS.VN

0 nhận xét:

Template chuẩn để thiết kế trên iPhone and iPad & làm thế nào để sử dụng chúng?

Bài này được thiết kế để cung cấp cho bạn các công cụ & các thông số kỹ thuật mà bạn sẽ cần trong việc thiết kế.
[IMG]

Kích thước chuẩn của Màn hình và Icon

Độ phân giải của màn hình võng mạc là gì ? (Retina Screen)
Màn hình võng mạc iPhone là một điều đặc biệt đáng để xem. Khi xem bên màn hình mới và cũ ở bên cạnh, nó rõ ràng có sự thay đổi trong màn hình này và nó có ảnh hưởng đến việc thiết kế các ứng dụng của bạn. Xem video màn hình side-by-side và so sánh.
Bạn có thể thấy trong việc so sánh hai thiết bị có kích thước màn hình cho iPhone 4 không thay đổi từ mô hình trước đó. Tuy nhiên, cả iPhone 4 màn hình kích thước và mật độ điểm ảnh của màn hình được tăng gấp đôi, cho kích thước màn hình 640 x 960px (so với trước đây 320 x 480px kích thước) và một whopping 326 điểm ảnh trên mỗi inch (so với để 163ppi trước). Màn hình này mới ép 4 điểm ảnh có sử dụng để là một – đó là lý do tại sao những hình ảnh trông rất sắc nét và đẹp hơn!
Khi đọc về độ phân giải màn hình rất dễ dàng để nhanh chóng trở nên bối rối. Thực tế là khi xuất loại tập tin cuối cùng trên iPhone thường. Png và Xcode không xem xét giá trị dpi lưu khi vẽ hình ảnh. Nếu bạn làm theo các kích thước quy định dưới đây, bạn sẽ có trong hình dạng tốt!
[IMG]

Các thông số kỹ thuật cho thiết kế giao diện iPhone & iPad trong Photoshop

iPhone 3.0
Screen resolution: 72 ppi
Screen size: 320 x 480 px
Icon size: 57 x 57 px
File format: PNG-24 iPhone 4.0
Screen resolution: 72 ppi
Canvas size: 640 x 960 px
Icon size: 114 x 114 px
File format: PNG-24 iPad
Screen resolution: 72 ppi
Canvas size: 768 x 1024 px
Icon size: 72 x 72 px
File format: PNG-24

Graphics for the iTunes Store

Icon: 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB)

iPhone Screenshots: 320 x 480 px or 640 x 860 px (.tif, .jpg or .png, 72dpi, RGB)

iPad Screenshots: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB)

Kích thước cho màn hình tương lai

Bạn nên sử dụng các lớp hình dạng hoặc các đối tượng vector là cách tốt nhất để đối phó với sự gia tăng của các kích cỡ màn hình và hệ điều hành. Vì trong tương lai không biết có bao nhiêu smart phone or some things like that ra đời …
Vậy nên thiết kế cho 3.0 hay Retina trước ?

Đối với tôi, thiết kế cho các kích thước màn hình 320 x 480px và sau đó tăng kích thước lên tới 640 x 960px là lựa chọn tốt hơn. Vì khi bạn zoom 1 đối tượng từ nhỏ sang lớn, thì mọi thành phần trong đối tượng đó không mất đi mà chỉ rõ ràng hơn và bạn phải chắc rằng mọi đối tượng trong thiết kế đều phải là file vector.

Kiểm tra thiết kế của bạn

Cách dễ nhất để kiểm tra thiết kế của bạn là “Save for Web” mỗi thiết kế màn hình thành định dạng png. Và đồng bộ với điện thoại của bạn bằng cách sử dụng iPhoto. Một khi những hình ảnh được đồng bộ hóa, bạn có thể lướt qua và mô phỏng những gì các ứng dụng thực tế sẽ như thế. Đây cũng là một cách tuyệt vời để chia sẻ mockups với khách hàng để cung cấp cho họ xem trước của ứng dụng này.
Thiết kế templates cho iPhone & iPad

iPhone Templates
iPhone GUI PSD from Teehan + Lax
iPhone GUI PSD Retina from Teehan + Lax
iPhone Stencil for OmniGraffle from Patrick Crowley
iPhone UI Vector Elements from Mercury Intermedia

iPad Templates

iPad Stencil for OmniGraffle from Information Architects
iPad GUI PSD from Teehan + Lax
iPad Vector GUI from Icon Library

Định dạng tập tin mà tôi dùng cho thiết kề đồ họa iPhone ?

Tất cả các tài sản đồ họa sẽ được sử dụng để xây dựng một ứng dụng được xuất khẩu trong Portable Network Graphics (. Png) định dạng. Về mặt kỹ thuật, iPhone có thể hiển thị các định dạng tập tin khác là tốt, nhưng các tập tin PNG được tự động tối ưu hóa bởi SDK iOS, và do đó nên là định dạng ưa thích.
Điều này áp dụng cho tất cả các yếu tố (nav btn, bars , vv) và các hình ảnh bất kỳ khác trong ứng dụng trình diễn. Ví dụ, chúng ta hãy nói rằng ứng dụng của bạn là một danh mục đầu tư cho một nhiếp ảnh gia. Các bức ảnh trưng bày cũng sẽ được xuất khẩu trong định dạng png.
Các thiết lập để xuất khẩu định dạng png trong Photoshop (File> Save for Web và thiết bị) trông như thế này:
[IMG]

Chuẩn bị file cho developer

Trước khi giao các tập tin của bạn cho một nhà phát triển, điều quan trọng để hiểu khả năng của mình liên quan đến cắt và dicing tập tin của bạn. Nếu nhà phát triển của bạn có nhiều kinh nghiệm trong việc cắt và xuất khẩu, nó có thể là một tiết kiệm thời gian rất lớn để giảm tải nhiệm vụ đó. Cá nhân, tôi thích để cắt tất cả các tập tin của tôi để đảm bảo tất cả các hình ảnh được thái lát ra đúng cách.
Khi lưu hình ảnh cuối cùng của bạn, hãy thử sử dụng quy ước đặt tên tập tin trực quan mà sẽ làm cho vị trí và tham khảo các tập tin hình ảnh chính xác dễ dàng hơn cho các nhà phát triển của bạn. Dưới đây là một số ví dụ tiền tố và hậu tố tôi sử dụng:

“btn-” for all button images
“tab-” for all tab bar images
“bkg-” for all background images
“-up” for in-active state buttons
“-down” for active state buttons
“-hover” for hover state buttons
“@2x” this is a standard suffix required for all retina display graphics

Một công cụ tôi sử dụng để giao tiếp với các nhà phát triển là một tập tin. Pdf bao gồm tất cả các màn hình cộng với ghi chú liên quan đến thiết kế. Tôi xác định các kiểu chữ, kích cỡ, khoảng cách dòng và tất cả các phong cách khác để có một tài liệu tham khảo dễ dàng mà các nhà phát triển có thể sử dụng mà không cần phải mở Photoshop. Tuy nhiên, một nguồn tài nguyên cung cấp, đặc biệt là khi tôi đang làm việc với các nhà phát triển off-site, là một hình màn ảnh (ScreenFlow và iShowU được yêu thích của tôi) của ứng dụng, đi bộ qua mọi khía cạnh của thiết kế. Điều này đặc biệt hữu ích nếu ứng dụng có chứa hình ảnh động và / hoặc các quá trình chuyển đổi tốt hơn được minh họa trong một video.

0 nhận xét:

How to Design an iPhone App in Photoshop

In this tutorial, we will use Adobe Photoshop, to design a simple 3-page directory listing app for iPhone. This article will guide you through the steps, and cover all of the basic principles of designing iPhone apps using Photoshop.

Start off your project by deciding what the main purpose of your app is. And what is the simplest, most effective way to achieve that goal. For this project, we will be designing a simple 3-page directory listing app. The end goal is find a business near the user, and provide them with contact details, or driving directions.

So, I decided that page 1 would feature a search bar, and live updating results. There should also be a popup that gives you an option to filter the results by category. 5 results will be displayed at any one time, and when you scroll down on the page, another 5 are automatically loaded.

Page 2 is the information page for the users selected result, it features a larger picture, reviews, location, and contact details. Page 3 is the settings page, with general options for the app, and sorting preferences for the results.

Once you know the essential information your app needs, do some sketches on paper, to plan the rough layout of your app. Try these Wireframe Sketch Sheets to speed things up a bit.

In this tutorial we will design the first screen of the iPhone app.

Step 1: New Document

Open Photoshop and create a new document. Set the width to 640 pixels and the height to 960 pixels. If you plan to print off your concepts, the resolution of the Retina iPhone screen is 326 ppi.

Fill the background with Black.

Step 2: The Top Bar

The top bar with signal and battery information should always remain a constant on iPhone apps. Unless your app is a game or has some other good reason to be full screen.

As the bar is always the same, you can save time by using a pre-made image:

Save, or copy and paste the image above and paste it into your Photoshop document.

Step 3: The Background

Use the Rounded Rectangle tool to draw a white shape, that fills the rest of the document. The corner radius should be 10 pixels.

Let’s apply a bit of texture to the background. Here is a free download of one of the textures in our Soft Grunge Seamless Textures pack.

Apply this texture as a Pattern Overlay.

Step 4: The Title Bar

Draw another rounded rectangle, about 640 pixels wide and 94 pixels high. Place it just below the top bar.

With the Delete Anchor Points tool selected, remove the two points highlighted red in the image below.

With the Convert Point tool selected, click once on each of the two points highlighted red in the image below.

The last two actions should have resulted in a rectangle that is rounded on the top corners and straight on the bottom corners.

Tweak the shape if necessary so that it is exactly 640 pixels wide and 84 pixels high. Use the Direct Selection tool to select and nudge anchor points. And use the Transform tool to check the dimensions of the shape.

Step 5: Apply Styles to the Title Bar

Open the Blending Options for the title bar layer, and apply a drop shadow with the settings shown below.

Apply an Inner Shadow:

And finally, a Gradient Overlay:

Step 6: The Title

Use the Type Tool to create the title. Center it middle of the title bar, and apply a drop shadow:

Step 7: The Title Bar Buttons

Draw a 56 x 56 pixel rounded rectangle, and align it to the right side of the title bar, as shown below:

Apply a Drop Shadow:

Inner Shadow:

And finally, Gradient Overlay:

Place this icon from the iPhone Toolbar Icons set, just above the button. And give it a subtle Drop Shadow:

Copy the button across to the left side of the title bar, as shown below:

Use the Rounded Rectangle tool to draw 3 shapes, each 34 pixels wide and 7 pixels high, as shown below. Also apply a subtle Drop Shadow to all 3.

Step 8: The Leather Texture

Duplicate the Title Bar layer and move it up (ctrl+]) until it is above the title, and both buttons. Se the Fill Opacity to 0, and apply this seamless leather pattern as a Pattern Overlay with the following settings:

Step 9: The Page Background

Use the Rounded Rectangle tool to draw a shape that fills most of the remaining space. Leave a thin even margin around the shape, as shown below:

Apply a Drop Shadow to the shape:

Duplicate the layer twice, then select the middle layer and nudge the bottom points up 10 pixels with the Direct Selection tool. Then repeat with the top layer, but nudge it up 20 pixels.

Step 9: The Search Field

With the Rounded Rectangle tool selected, set the Radius to something high, for example 100px. Then draw a shape at the top of the page, as shown below:

Apply an Inner Shadow with these settings:

Place this Search Icon from the Vector Application Icons set, on the left side of the search field.

Add some text:

Draw a divider below the search field, using the Line Tool.

Step 10: The Thumbnail

Draw a rounded rectangle about 100 x 100 pixels, and apply a Drop Shadow as shown below:

Place this icon from the iPhone Toolbar Icons set, in the middle of the shape.

Step 11: Listing Information

Add some text for the title of the listing:

Add some text for the location of the listing:

Use the Polygon Tool to draw 5 star shapes:

Apply a Gradient Overlay to some of the stars to illustrate the rating of the listing.

Add some text for the “Reviews” link.

Step 12: The More Info Button

Draw a Rounded Rectangle, the same height as the thumbnail, on the right side of the page. Apply a Gradient Overlay:

Place this icon from the Vector Application Icons set, in the middle of the shape.

Step 13: Arrange the Results

Draw a divider with the Line Tool:

Group all of the layers that make up the listing result. Duplicate the group 4 times and arrange them as shown below:

And there you have it. The first screen of our iPhone app! These techniques can be applied to most elements of iPhone app designing in Photoshop. You can download the PSD of the end result here.

Thiết kế website Hội An

Những quy tắc vàng về kết cặp font trong thiết kế

0 nhận xét:

9 điều mà các designer cần tránh khi thiết kế icon

0 nhận xét:

Template chuẩn để thiết kế trên iPhone and iPad & làm thế nào để sử dụng chúng?

0 nhận xét:

How to Design an iPhone App in Photoshop

Step 1: New Document

Step 2: The Top Bar

Step 3: The Background

Step 4: The Title Bar

Step 5: Apply Styles to the Title Bar

Step 6: The Title

Step 7: The Title Bar Buttons

Step 8: The Leather Texture

Step 9: The Page Background

Step 9: The Search Field

Step 10: The Thumbnail

Step 11: Listing Information

Step 12: The More Info Button

Step 13: Arrange the Results

1 nhận xét:

facebook

Quảng cáo

Labels

Popular Posts

Trang

Giới thiệu về tôi

Lưu trữ Blog

About

Link List

Nhận xét

Contact Details

Thiết kế website Hội An

Những quy tắc vàng về kết cặp font trong thiết kế

0 nhận xét:

9 điều mà các designer cần tránh khi thiết kế icon

0 nhận xét:

Template chuẩn để thiết kế trên iPhone and iPad & làm thế nào để sử dụng chúng?

0 nhận xét:

How to Design an iPhone App in Photoshop

GET INSTANT ACCESS TO 10000+ DESIGN RESOURCES!

Step 1: New Document

Step 2: The Top Bar

Step 3: The Background

Step 4: The Title Bar

Step 5: Apply Styles to the Title Bar

Step 6: The Title

Step 7: The Title Bar Buttons

Step 8: The Leather Texture

Step 9: The Page Background

Step 9: The Search Field

Step 10: The Thumbnail

Step 11: Listing Information

Step 12: The More Info Button

Step 13: Arrange the Results

1 nhận xét:

facebook

Quảng cáo

Labels

Popular Posts

Trang

Giới thiệu về tôi

Lưu trữ Blog

About

Link List

Nhận xét

Contact Details