Tag Info

Hot answers tagged

8

The sans used for captions is Neutraface 2. (found that out by going to The New Yorker's website and looking at their CSS). The text face was identified by WhatTheFont! as LTC Caslon Regular and it looks pretty much close to really being so.


8

This is called Marker Rendering, is a sketching technique to present design ideas. It's a very common presentation technique used by any designer attending early stages of design, arts or architecture school. It is also used by professionals that become masters at this technique. This skill kills any computer aided illustration technique, becuase is ten ...


5

I think what you're looking for is very similar to this recent question: How to achieve a gradient in adobe illustrator The issue is that a lot of what seems flat in the latest UI trends really isn't. There are subtle gradients and hard edged shadows all over the place. As I noted in the comments, I think the main thing you are noticing is how your very ...


5

If you don't want your screen shot to be blurry, open the screen shot in PhotoShop, then go to image size, increase the size x2 in each dimension, and then choose 'nearest neighbor' as the interpolation option. The end result will be an image 4 times larger but the pixels will remain aliased and you won't get the blurring.


4

If you're using a designer, my first suggestion (as a designer!) is not to get involved in the technical intricacies, including terminology. Leverage the designer's experience and expertise and let her do her job. I often work with clients who don't have the terminology but do have an idea of what they're going for, and the design process usually iterates ...


4

You'll have to decide if you want that person to really be a UI designer or if you want them to develop the code as well. In my experience, it's best to have someone focused on the customer side of UI/UX who works closely with a true UI developer to make the magic happen. Two people are definitely stronger than one in this role. If it's a ...


4

There are templates / stock images of different devices out there on the web (and very easy to find), but the best answer I can give you is that you could easily create what you are looking for in Adobe Photoshop and then save that in your own custom template. For example, if I wanted to have a template with a Thunderbolt display I could mask a portion of ...


3

Martz has a good answer. Give him the credit. To add some more details, however: I'd say that particular type of drawing is a hand drawn conceptual sketch. The idea is to show the rough concepts of a product's design. Usually its form, along with surface decoration (colors, textures, etc.) The style it is done in as a marker rendering. Specifically the ...


3

There is a huge myriad of resolutions for different devices (this is a good cheatsheet for iOS), but you are in the right track. The 'real' resolution is, as you pointed out, 1024 x 768 pixels. But when you are preparing the materials to send to the developers, you need to design with retina in mind. This means, all your graphics need to be either scalable ...


3

To create an iOS icon, you simply have to provide images for at the various sizes. For iOS, the main sizes are (if you're making an iPhone and iPad app): 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 and 1024x1024 For Android, the image sizes are: 36x36, 48x48, 72x72, 96x96 and 512x512 Icons are delivered as PNG files. Generally ...


3

i am getting same result in 72 itself That's because PPI settings in PhotoShop really only are applicable to printing the file on paper from software that reads the PPI meta data in the PSD. In other words, it does't matter at all what you set the PPI to in PhotoShop when working with screen-based graphics. All that matters is the pixel dimensions of ...


3

Search around for "mockup template". There are some free ones out there, and some paid. These allow you to easily create a realistic mockup using whatever artwork you desire. Here's one good resource: http://www.pixeden.com/psd-mock-up-templates Related question: How can I take an iPad psd file and put an image inside it?.


3

I think you are more than likely to receive a cease and desist letter from the company's lawyers. I agree with Scott; if you don't have written permission you are asking for trouble. This sort of thing is not unprecedented. Here is one example involving Blizzard: Blizzard sends a C&D to Warcraft Characters, other iPhone apps [Blizzard have] already ...


3

I use Illustrator for that. If the platform you are going to use supports SVG, go for it. Otherwise, here are some thoughts about how to create crisp raster UI elements using AI (JPG, PNG, etc). Mind you, I am a pixel picker and a bit obsessive at it. Make sure you create a document that is RGB to start with (as opposed to CMYK) so you can see the colours ...


2

According to Apple.. yes: Apple's legal stuff You can't use Apple to sell non-Apple products. That includes Apple's "Trade dress" or look-and-feel. I don't know about Android but I suspect there's a similar document somewhere for Google.


2

Legally, yes, you are copying protected IP. In this case, it'd likely be a form of 'trade dress' or, possibly patent infringement. Would Apple or Google sue? Likely not. Your use could even be argued as fair use (though whether you have the financial ability to argue it in court is another issue). Context is everything, of course. All that said, I'd ...


2

Nothing should happen. The iphone 4 has a higher pitch screen but doesn't usually effect the number of pixels in an image/UI however I would think using high res UI design would slow down the iPhone 3. the best way to check is design a background image or UI element and see how they look on each iphone.


2

You have two ways of doing what you are asking depending on the purpose you are following. If your purpose is that the image has to scale automatically depending on the resolution of the device's screen where it is visualized then the prior answer by DA01 works fine. The scale job is done by using HTML5 and CSS. This is true if you are building a Web App, ...


2

Check out Poser they have many 3D character models. You might even find some custom creations floating around online if you do a search. Another option if you want a 'unique' face is to use photogammetry, which is basically using multiple photos to construct a 3D model. I know there is at least one app on iPhone that does this, unfortunately I can not ...


2

If this is the correct icon, looks like the border radius is 12px. The overall size is 60 x 60px. Image taken from DesignBoom


2

DPI is irrelevant. Ignore that. All that matters is pixel dimensions. Make sure you are making them at the dimension they will be used. Ie, if it's going to be 30px x 30px on the iPhone, make your image 30px x 30px. For retina, you'll want to make a second version at 60px x 60px. PNG files are fine. But use whatever makes sense for your particular needs. ...


2

I imagine one of the reasons why you are having difficulty with this shadow is because it kind of gets smaller in the center, it doesn't go all the way to the ends. I would re-create it using a new element: Create a white rectangle (your page) over a gray background In a nee layer under the rectangle, draw a black oval shape the size of your desired ...


2

This is the most thorough piece of information I've found online. There are other similar resources that can assist with the design of your own elements, but this one covers the nuts and bolts of what exists and how it renders: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/


2

What I understand from your question is the following: You want to create screenshots of an app (NOT an actual app), like the ones in the Appstore. Is this correct? So some notes about your questions: Unless you are preparing things for printing, you won't be using points (in any graphic software). For digital work, pixels are all you need. The iPhone5 ...


2

I am skeptical about the idea that "vectors aren't supported." I am certain that libraries exist for all mobile platforms: vectors are only ever viewed as raster images. {edit for clarity:} While the "mipmap" discussion below refers to 3d rendering, the mipmaps themselves are "raster" textures to be applied during rendering. There is no reason one cannot ...


1

That really depends how much your designs are in common for the different platforms. You probably should define which is your "lead" platform one that you finish the design on and then adjust for the other ones. Which is probably easier to do if you have different files for each design. You should also consider that you will need multiple views for each ...


1

It's not a radius. The iOS icon grid, including the corner curve can be easily put together using two ratios. These ratios are the golden section and the square root of two. Determining the points through which the curved corner passes is surprisingly simple. The grid as it is presented by Apple shows how to establish three points of the curve: 1) the point ...


1

These guys made a great action set that does pretty much what you want. I modified their version of the actions (JLRetinaPNGExport.atn) which you can find here. This action set comes with 2 actions: current layer export as .png at 100% then 50% merge visible and export as .png at 100% then 50% Hope this helps


1

As DA01 said, if you're designing for mobile devices, in fact these days the same principal should be applied to ALL screens, you simply don't know what screen size, resolution, or even zoom ratio the user may be on so you need to work with a responsive grid. Twitter bootstrap provides a grid framework with both PSD files and code which might be a good ...


1

An iOS 4 version. I don't believe there are any restrictions on this. You can always check with the creators. -- Just noticed that they have newer versions -- An iOS 6 version is available now. There's plenty more there, just check the right rail.



Only top voted, non community-wiki answers of a minimum length are eligible