Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
This may be an old and trivial question but I have been struggling to find out which tool should I use to create the artwork (icons, images, logos etc) for my iOS apps? Can somebody here share their first hand experience and suggest some tools (preferably free) to do the job?
I personally use Inkscape and the GIMP, they are the open source equivalents for Illustrator and Photoshop even though they're not so equivalent.
Inkscape can generate PNG files which are good for IOS development.
Whatever you are the most comfortable with. iOS can work with PNG, JPEG, GIF...
If you want to do it the professional way and/or you plan on interacting with other professionals on your project(s), then the standard is to use Photoshop and export UI assets as PNG files.
If you are looking to something similar at a more affordable price, Pixelmator is a popular tool with plenty of tutorials.
Whatever tool you use, be sure to design your artwork using vectors - iOS requires graphic assets in a variety of sizes, and you don't want to design, say, an app icon and realize later that you need a larger one, but have to redo your icon because your source wasn't a vector. After all, you never know when Apple might need a new size (for example, the new iPad and the retina sized splash screens).
Personally, I use photoshop to do my graphic work - mainly because it is a standard, though as long as your tool can generate pngs and jpgs, you should be fine. Just be sure it can handle scaling/zooming large images well as an iPad retina screenshot is 2048x1536 and it is unlikely your monitor will be ale to display it natively.
Related
I usually do not care much about my assets even if I support the iPads in my project. As long as the imageView for the background of the app is set to Aspect Fill.
Also, here are some links I've found, but not so related to this question.
OLD Question and old answers: How to support both iPad and iPhone retina graphics in universal apps
Cool question and cool answers, however, question and answers focus merely in iPhones:
iOS: Preparing background images for applications
Going back to the question, if I have an Adobe XD file or Sketch, or Photoshop or whatever file that lets me export an image/asset, in what resolution should I start? Do I start with the largest possible size (for iPad Pro) which is 1024x1366 then let the software cut the sizes into #1x and #2x?
If I'm only to support the iPhones, then this would be way lots easier. Thank you!
If your source is vector based, then (obviously?) it's a non-issue...
With bitmap / raster images, you almost always get better results by scaling down.
Depending on the image itself (a photo tends to scale much better than a line-drawing), you may not be happy with simple "auto-gen" features... in which case, you'd need to manually "scale and tweak".
(Hope that helps).
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Recently i have seem articles that mention about it is advisable to load smaller size image in mobile device when using responsive web design.
Let say i have a product image that is uploaded by client(high definition image). What approach can i use to load this image of smaller size into the client side browser(other than create a duplicate of image of smaller size). Or the way that most developer did is to create a duplicate image of smaller size?
Maybe we can do it in server side to reduce the image size before user load the image? but will this affect server performance?
Ideally you should resize the image when it is uploaded and store the different versions on the server. Then when clients request your website from different browsers you would adjust and select the proper image to be included. You would also avoid the CPU intensive dynamic image resize on each request.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I perform UI design on my Mac mini but when I add the images to my iPhone the colors appear different.
When I take a color like #f2f2f2 and use it in my app it will be look different.
How can I sync colors on my iPhone screen and Mac mini screen to see the same colors?
[I want to design my UI first in Photoshop and after this add him to my application.
My screen:
brightness/contrast: 75% / 75%
input color format: RGB
gamma: mac
Have you calibrated your screen?
Although it will be impossible to get an exact color correct implementation on your design in Photoshop, if you calibrate your screen first on your Mac mini you should be on the road to getting it close to what you want.
Unfortunately there is no free way to get a calibrated screen. You can play with your color profiles in System preferences->Display->Color->Select a profile but it will be a fair way off if you're wanting it to be perfect.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I've been told to design iOS icons with vectors, so you can scale to all the different necessary sizes really easily. So I used Sketch 2 (I also have a copy of Illustrator handy) to create an app icon totally comprised of vectors that can scale to any resolution.
However, I'm not sure how I export it to all these different resolutions. What do I do from here? Save it as an .SVG and do something in Illustrator?
If it helps, I created a 200x200 rounded rectangle base for the icon, which is the "size" of it, but again, as it's vector it can scale to any size.
iOS does not read SVG outside of its UIWebView unfortunately (it would be really cool if it did).
Just export your svg as png or jpg in all the sizes you need and then load the right one for each device in your code. For example for iPad retina you want 70x70 jpg if the icon has to be 35x35 points big.
Another, more efficient, way is to just draw your icons programmatically with Core Graphics, so you don't have to load a different icon for each size, and your icons won't look different in future devices with different pixel densities. You can do it manually, or with an app named PaintCode, which is pricey ($99) but very useful: you draw and it generates the code for you to put in the drawrect method.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Ok, dumb question, the images on the page are all 72, so you can't have 300. But... what's the best way to print in as high resolution as possible on a brochure?
How about zooming in on the web-page before taking the screen-shot? Most modern browsers allow you to set a custom zoom level.
Note though that the images may not look as great as you would like. You can't do much about this without access to high-res version of the images.
If the browser re-renders for print, and a CSS compliant one should (to respect print display specific rules), then it should be rendering to the resolution of the output device.
If you can then output to raw postscript or a high res PDF, perhaps you'd be able to get these high quality printable parts via that route.
I don't think you can get a high resolution print from a generic web page keeping the layout perfectly right (so, if your objective is to illustrate how it looks on screen but with print quality, this should be a showstopper).
Even if the text and many elements are a kind of vectorial (scalable) graphic (i.e. in theory you could zoom the page so they are rendered bigger and enlarge the browser window to get an enlarged screenshot), many graphic elements ("normal" images) are raster graphic, that cannot be enlarged without ugly artifacts coming out.
Moreover, many layouts use pixels for sizes of various elements (which means that scaling things up and down may make the layout become a mess).
Print to PDF. You can't increase the resolution of the images period without shrinking them. The text will be vectors and therefore will scale to any resolution.
I think the best way is to use Photoshop or any other imaging software which supports different resolutions. After grabbing the screenshot, create a new file in your imaging software then change the resolution to 300. Last step is to paste the image from clipboard.
This way won't increase the actual resolution of the image on print but the quality of print is actually higher. I checked this way and it works for me.