Hot answers tagged

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


7

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


7

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


7

The gradient is a simple angle gradient. It is the third option on gradient tools on photoshop, however to get it spot on, you may have to tweak the color stops, rather than just using a standard two point gradient. Here is a quick comparison using the above method. As you can see, it's almost exactly the same:


5

Books for electronic devices are typically sold with reflowable text. I suggest you look into how to build an ePub. I suggest this because your are not allowed to sell or offer PDF format on iBooks Since you have mentioned possible building for android I would advise reflowable and not fixed. Fixed layout ebooks are developed based on the devices ...


5

This will vary from product to product. I would encourage you to seek out the terms and conditions on a case by case basis. This might involve e-mailing the company, but sometimes the information is already made publicly available. For example, here's Apple's marketing guidelines for iPads, iPhones, and iPods: 2.2 Image use The Apple product images ...


5

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


5

First and foremost you should start at "Designing Great Apps" and "Designing for iOS". If you don't aware of these sources your app certainly will be rejected by Apple. What to use? Anything you are most familiar with, Illustrator, Photoshop, Pixelmator or any other app you can run, and better - on Retina display. You should perform a lot of searching and ...


4

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


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


4

Assuming all is well technically with the image, most people won't notice such a difference. 12"x12" at 300DPI would be 3600x3600. You can't just increase the size of the image in photoshop; that's not how this works. What you end up with is an image that is approximately 200DPI (2448/12"). While not ideal, it'll work and be okay. What you can do if you'...


4

This is called an "Action Sheet". You can read more about how to implement it on the Apple iOS Human Interface Guidelines site.


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

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


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


3

i think resize of the png's is the best method, for Retina ex:-sample@2x.png for standard 50% of retina ex:-sample.png..


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


3

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


3

I read from the iOS human design guidelines it's 44 x 44 pt? Because the confusing thing is Apple is using pts instead of px, so the question is, how large should I make it in Photoshop? 44 pt = 44 px? For non-Retina devices, 1 iOS point = 1 pixel. For Retina devices, 1 iOS point = 2 pixels. For Retina HD devices (iPhone 6 Plus only right now), 1 iOS ...


3

apple is a little less " holding your hand" guide: https://developer.apple.com/app-store/review/guidelines/ there are however sizes for the icon and screen dimensions to be considered: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html in x code all designs are assembled in the xib area/ main ...


2

As a piece of reference material, that would typically come under the umbrella of fair-use. Alas, that doesn't stop you from being sued, so to argue for fair use, you may very well have to spend money and time.


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

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

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

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


2

The latest Photoshop update (Photoshop CC (2014.2) allows for @3x. Go to File > Extract Assets. A panel will appear with options: More details can be found here: http://www.adobe.com/uk/products/photoshop/features.html


2

Create your application as per 5S dimension. This fine you need given assest to developer as below. Retina display for iPhone4S,5,5S and 6 use @2x and only for 6pluse give @3x assest. For more refrence of assest size and guideline refer below link. http://iosdesign.ivomynttinen.com/


2

Design in points, then scale up. A point what was once a single pixel on non-retina devices. In the world of @2x retina devices, a point is now 2x2 pixels (4 pixels make up a single point), and in the world of @3x retina (6 Plus), a point is now 3x3 pixels (9 pixels make up a single point). The iPhone 6 Plus also does down-scaling automatically (from ...


2

Yes you can just bump up the image in PS a little, in my experience if the enlargement is up to only 20% more, you'd have to be a real image quality connoisseur to notice any loss. Just remember to set the resampling mode to "Bicubic Smoother" like bellow, so you get the best results. Of course it will never look like the photo was taken with pro camera ...


2

It's a tad difficult without seeing the actual aesthetics. However, I'd say . . . don't force it. Left align the items with equal space (leading) between the lines. As you see to have it in the image. There's no compelling need to center or otherwise distribute objects of varying lengths. I would place the top items closer to the top of the viewport. ...


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