App Icon Design tips: Get a real-world preview of app icons on iOS

Strictly speaking, this is not an article on front-end development, because the knowledge involved is very shallow. It's just a little experience to share with the design lions, but there are some front-end content.

Recently received a reverse telecommuting, learned that a start-up company is a high-priced logo (mainly used for app icon), I have submitted a trial, the results are really selected, I think far beyond the value of the logo of the prize (it seems that the start-up companies to get investment in real meat). Gossip not table, after the design of the logo I brainwave, with the iOS system to do an app icon real-world preview, together sent to the party.

Let's assume that the logo we just made is the following (this is the sample icon, which is replaced with the logo of my UWP app, the book Science Calculator, and the hue is properly used to know the blue bar):

The ultimate goal of this article is to place it on the main iOS screen, with the following effects:

If you take another picture of the object, you can act as the icon (the phone is ugly and not sprayed):

In short, this is a simple way to get you to say goodbye to P-graphs and set mockup. Instead of actually compiling this iOS app, all you need to do is build a local server with your computer and make a very simple Web page. Then open this page with Safari on iOS and send a Web shortcut to the Home screen to achieve this effect.

First, build a local static server

This article takes Windows systems as an example. Mac system can be used Apache, details please Baidu, not complicated. So Mac users can skip this section. Windows can also be used with Apache, but it's more convenient to bring your own IIS.

I used to send an article about building a local IIS server, you can also see here: Web front-end page browser compatibility Test experience (a) building a test with a local static server. In fact, this article is in the introduction of the actual use of local static server, to see what can be incredible operation!

As. NET family member, IIS is often combined with the backend ASP to build a station, but here we do not need to configure ASP. With just a few steps, you can turn on the IIS service on your computer.

The following steps take the WIN10 system on my computer as an example, and the operations on the WIN8 and Win7 are similar:

1. Open the Control panel and go to "programs and features":



2. Click "Turn Windows features on or off":

3. Refer to the Red Circled section in the picture to select the desired component. Note: It is not possible to tick only the top-level option, you must tick from the bottom-most option until the selected component shows all as "√", as shown in.
4. Click the "OK" button and Windows will start adding IIS features, which lasts a few minutes and then you can use the IIS feature.

5. In the Start menu, under the Windows Administrative Tools directory, locate and open Internet information Services (IIS) Manager (it is recommended that you pin the shortcut to the Start menu, which is easier to open later).

6. In the list on the left side of the interface to find your own host that one, right-click, select "Add Site":

7. The "Add Site" window will pop up, so let's leave it. We open a command prompt (cmd), enter "Ipconfig" and return to the IP address of our local LAN (note the IPV4 address, and start with "192.168").

8. Go back to the "Add Site" window, fill in the site name as shown, set the path to the root directory of the server (where you prefer the root directory), and fill in the local IP address as the server access address, click OK.

9. At this point, we found that the site has been established and started:

Second, new static page

With the local server, we can put the static Web page in. iOS devices can access the server on your computer as long as your iOS device and computer are connected to the same WiFi.

1. On the computer, we go to the server root that we just set up (my is "C:\server-root") and add a homepage here. Create a new text document, enter the following code and save it, and change the file name to "Index.html".

<!DOCTYPE HTML><HTMLLang= "Zh-cmn-hans"><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <Linkrel= "Apple-touch-icon"href= "Icon256.png" />    <title>App Name</title></Head><Body>    <P>Ok!</P></Body></HTML>

(Note: "App name" should be changed to the name of the app you need to fill in)

2. Then the design of the logo to make a size 256px*256px application icon, save as PNG format (size must be right), placed in the same directory and index.html, renamed to "Icon256.png":

3. Enter the IP address of your computer in the browser to see if the homepage is displayed successfully:

4. It seems that we have succeeded! Now you can open safari on your iOS device, enter the IP address, after confirming the normal access, click the Share button in the upper right, then click "Add to Home Screen":

Next click the Home button and you'll find it's done:

Here is a brief introduction to the principle, the most important thing is the code in HTML:

<rel= "Apple-touch-icon"  href= "icon256.png"/>

That's a statement. If Safari sends a Web page shortcut to the Home screen, it takes "icon256.png" as an icon. But now, as the app is so rich, it seems like no one has done it.

Fortunately, the function of this sentence is more than this. With this link element, if you bookmark this page, you will also see this icon in your Favorites folder, which is a lot more common:

Perhaps this article for the design lion is still a little geek, do not know how to accept. Anyway, happy design, party a refreshing ~

App Icon Design tips: Get a real-world preview of app icons on iOS