Hot answers tagged

22

Designing at 100% scale just means designing at the size (in pixels) that you will be displaying/outputing your icon at. If you are designing a 24px × 24px icon, you set up your artboard in Illustrator or document in Photoshop or whatever else you are using to 24px × 24px. As quoted from the Material Design guide, this is for pixel accuracy. If you work at ...


17

Android icons (and other UI elements, like drag lengths) are measured in dp. A dp is a device/density-independent pixel. 1 dp is equivalent to 1 px on a 160 dpi screen. But to convert to other screen densities, you need to multiply it by a density factor. So it's generally recommended that multiple images are supplied for most icons. For example, the ...


17

They're familiar. Designers tend to use Macs, so when they want to put a mockup on a screen, it's the first that would come to mind. They're popular. Sure, Windows has more market share. But can you name a single model of PC that's super popular? What about an all-in-one desktop? What about an external monitor? They're good-looking. Macs have a reputation ...


10

After trying a bunch of Windows applications, I haven't found anything equivalent to Sketch for Windows. And no, Illustrator and such are NOT Sketch alternatives. Fireworks is probably the closest, and it's no longer supported by Adobe. It seems that they are now creating a copy "heavily inspired by Sketch" app: Project Comet. We'll see how it goes, but ...


9

I have an app called Slide that's meant to be used as a graphic tablet. It now connects over USB or WiFi. Website: http://www.slide-app.com/ Google Play: https://play.google.com/store/apps/details?id=com.j03.mobileinput Free Version: https://play.google.com/store/apps/details?id=com.loren.slide


8

Not a complete solution, but this might help someone who's come here from Google. If you save with the Save for Web dialog File > Save for Web you can re-size during the saving process, the options are on the right hand side under Image Size. I do this quite often when I need a couple of different sizes for an image, although as the other responses ...


8

32bit refers to 8 bits per channel for red, green, blue and alpha. In Photoshop, that's called 8 bit mode. 32 bit mode in Photoshop refers to 32 bits per channel, meaning 128 bits in total (32each for red, green, blue and alpha). 32×32dp (display points) works out to be 32×32 pixels for mdpi, 48×48 for hdpi, and 64×64 pixels for xhdpi. Those are the ...


8

You can do this really easily in CS6 or later by applying a gradient to a stroke with a rounded end cap. I've circled the relevant appearance settings below: Older versions of Illustrator do not have the ability to apply gradients to strokes. If you don't have CS6+, you can an art brush instead. Follow the same technique described here (replace the ...


8

While the other answers are accurate, the real explanation is far easier: They're standardized. What's a windows laptop look like? What's an android phone look like? What's an Apple laptop look like? What's an iPhone look like? There you have it, two of those you could visualize, two you couldn't. You might have ideas about the Windows and Android look ...


7

The effect you described is simply achieved by duplicating the shape, changing it to outline, moving it up a bit and putting it in the background. What the website you linked to describes is a concept of creating a depth perception. The examples you have given are not meant to represent the final design but how this effect is basically executed. The final ...


7

The font itself (with its variants) can be bought from Linotype. Font licences change depending on the foundry, and also depending on use. You will for sure need to buy at least one license for commercial use. But as always with font licensing, it's best to ask the foundry directly, as each one is different. From ...


7

I believe the full answer to your question can be found here: http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android To convert dp to px you need to take account of the display dimensions you are addressing to. The greater the DPI, the more pixels you'll have to cram in the same area to make it look good and to avoid ...


7

There are some different ways you can handle this. Don't place vital content below the button This is the most obvious approach, and probably the most general. Whenever possible, structure your design to make sure that nothing vital is below the action button like other buttons, main content, etc. You can add extra space by using padding or a blank ...


6

Not all displays are equal. This is a problem in the desktop world, too. I got shiny new monitors last year, and looking at some of my old work now emphasizes just how poorly calibrated my monitors were at the time. My advice is to just accept it as something you can't control and ensure that there is sufficient contrast between your colors so that it ...


6

I think the accepted is wrong. The css px is actually Device Independent Pixel(dip), and it is a common pattern to use px as dp in css.


6

May be a bit simplistic and not the most elegant solution, but: add an empty 'dummy' entry to the end of the list, so the user can scroll further than the last entry.


6

This is called a ligature. The tend to be very subtle, like the ones used for te ff, fi and ffl combinations. This one is... less so. You can deactivate ligatures (all of them) using -webkit-font-variant-ligatures: no-common-ligatures;, but that will also get rid of the (useful) other ligatures. You might want to check out this StackOverflow question on ...


5

Before you get into extruding your icon, it's worth considering that a) you only have a very small number of pixels to play with (3 at the most, really), and b) there are very, very few Android app icons that use (or fake) extrusion to create the illusion of depth. The guidelines call for dimensionality, and there are many effective ways to achieve that ...


5

This is answer is purely from a website standpoint. Media querie, curtesy of CSS3, gives us more control over how a website will look at various resolutions. As you scale down the width of the browser it will swap to the code for that width. Some info on Media Queries - http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries This falls ...


5

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?.


5

The Android Developers link is a bit confusing because it mentions DPI, but you shouldn't be worrying about that. DPI is important for the devices, but it's not necessary for designing the icons (I don't normally use Gimp so I don't know if it has an automatic way of preparing files for different resolutions, but I'll assume you want to do it manually and ...


4

I'd agree with the others that say you're not going to get a quality graphics tablet experience from an inexpensive tablet. The right software (don't know what) teamed with something like the Thinkpad tablet would work, but only because the Tablet has a digitizer (Wacom branded) built in already. The others that have taken this line insist Wacom is your ...


4

Ok, a lot of these answers are great, but let me give you a few thoughts from a designer. Right now, you have 3 different densities to design for (mdpi, hdpi, and xhdpi). Although choosing a density to start with is your preference, I would recommend starting with hdpi, and scaling your design from there. If you look up the stats on how many people are ...


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

I've usually used this tool for this very purpose : http://placeit.breezi.com/.


3

With Photoshop CC, there is now a feature called Photoshop Generator which is designed to create multiple images You can read about Generator here: http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html An excerpt: Generator allows you to create image assets in real time as you work, eliminating the tedious ...


3

How many times do you need to export the icon? If it's just the one icon, your best option is probably just to draw everything using vectors and layer styles, resize the document, make any adjustments required and save the PNG (optionally keeping the PSD for future exporting). If you need to repeat the process many times, I'd recommend setting everything up ...


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

First off, are you going to support only phones, or tablets too? Secondly, you have it pretty much right. My experience comes from games, but I'm sure it applies to other apps just as well. Just create your High-Res assets first, and then scale them accordingly for Med- and Low-Res devices. You shouldn't have to worry about minuscule screen size ...


3

I still haven't found a useful tablet app for working with Photoshop (or any graphic application, for that matter). With apps that try to use the tablet as a sort of remote desktop device, bandwidth problems will drive you crazy. None of the "remote" apps I've tried, including RemoteDroid, PRemoteDroid, Win-Remote and several others, provides ...



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