&ని ఎలా తయారు చేయాలి వెబ్‌సైట్ కోసం రెటీనా-రెడీ iOS బుక్‌మార్క్ చిహ్నాన్ని సెట్ చేయండి

విషయ సూచిక:

Anonim

వెబ్ డెవలపర్‌లు మరియు వెబ్‌సైట్ యజమానులు శ్రద్ధ వహిస్తారు: మీరు రెటీనా-రెడీ iOS బుక్‌మార్క్ చిహ్నాన్ని సెట్ చేయాలి. బుక్‌మార్క్ చిహ్నాలను Apple టచ్ ఐకాన్ అని పిలుస్తారు, మరియు ఈ అనుకూల చిత్రాలు ఐప్యాడ్‌లో వెబ్‌సైట్‌ను బుక్‌మార్క్ చేసినప్పుడు వినియోగదారులు హోమ్ స్క్రీన్‌పై ప్రదర్శించబడే చిహ్నంగా మారతాయి, iPhone, లేదా iOSలో iPod టచ్ లేదా OS X కోసం Safari యొక్క బుక్‌మార్క్‌ల ప్యానెల్.కస్టమ్ ఆపిల్-టచ్-ఐకాన్ ఫైల్ సెట్ లేకుండా, వినియోగదారులు వెబ్ పేజీలోనే బోరింగ్ మరియు తరచుగా అగ్లీ థంబ్‌నెయిల్‌ను పొందుతారు మరియు రెటీనా-సిద్ధంగా ఉన్న చిహ్నాన్ని ఉపయోగించకుండా, బుక్‌మార్క్‌ల చిహ్నం కొత్త ఐప్యాడ్ స్క్రీన్‌లో పిక్సలేటెడ్ మరియు సాధారణంగా భయంకరంగా కనిపిస్తుంది.

ఏదైనా వెబ్‌సైట్ కోసం రెటీనా పర్ఫెక్ట్ ఆపిల్ టచ్ చిహ్నాన్ని సృష్టించడానికి మీరు కొన్ని సులభమైన దశల్లో ఏమి చేయాలి.

1) రెటీనా-రెడీ iOS వెబ్‌సైట్ చిహ్నాన్ని సృష్టించండి

ఒక టెంప్లేట్ ఉపయోగించండి లేదా మీ స్వంతంగా డిజైన్ చేసుకోండి. నేను మునుపటి పోస్ట్‌లో పేర్కొన్న సులభమైన DIY రెటీనా ఐకాన్ కిట్‌ను ఉపయోగించాను, ఇది PSD ఫైల్, ఇది అందంగా కనిపించే iOS చిహ్నాలను ఒకటి లేదా రెండు క్లిక్‌ల వలె సులభంగా డిజైన్ చేస్తుంది. వెబ్‌సైట్ లేదా కంపెనీ లోగోలో అతికించండి మరియు మీరు వెళ్లడం చాలా మంచిది. మీరు PSD ఫైల్‌లను సవరించడానికి ఏదైనా కలిగి లేకుంటే, Photoshop CS6 బీటా అద్భుతమైనది మరియు సంవత్సరం తర్వాత తుది వెర్షన్ వచ్చే వరకు డౌన్‌లోడ్ చేసుకోవడానికి మరియు ఉపయోగించడానికి ఉచితం.

2) PNG గా సేవ్ చేయండి & రెటీనా వెబ్‌సైట్ బుక్‌మార్క్ చిహ్నానికి పేరు పెట్టండి

ఐకాన్ తప్పనిసరిగా PNG అయి ఉండాలి మరియు దానికి తప్పనిసరిగా రెండు విషయాలలో ఒక పేరు పెట్టాలి. ప్రతి ఫైల్ పేరు వినియోగదారుల హోమ్ స్క్రీన్‌లో ప్రదర్శించబడే విధంగా చిహ్నం యొక్క కొద్దిగా భిన్నమైన రూపాన్ని అందిస్తుంది:

  • apple-touch-icon.png” ఐకాన్‌కు హైలైట్ బబుల్ ఓవర్‌లేని జోడిస్తుంది
  • apple-touch-icon-precomposed.png” హైలైట్ ఓవర్‌లే లేకుండా, మొదట సృష్టించిన విధంగా చిహ్నాన్ని ప్రదర్శిస్తుంది

మీరు మీ స్వంత హైలైట్‌ని సృష్టించినట్లయితే లేదా యాపిల్ యొక్క చాలా డిఫాల్ట్ చిహ్నాలలో కనిపించే సర్వత్రా బబుల్ లేకుండా ఐకాన్ మరింత ఫ్లాట్‌గా కనిపించాలని మీరు కోరుకుంటే, రెండో-ముందస్తు ఎంపికను ఉపయోగించండి.

3) వెబ్‌సైట్ బుక్‌మార్క్ టచ్ చిహ్నాన్ని బేస్ వెబ్ డైరెక్టరీకి అప్‌లోడ్ చేయండి

Apple-touch-icon.png ఫైల్‌ను రూట్ వెబ్ డైరెక్టరీకి కాపీ చేయడానికి SFTP క్లయింట్‌ను (OS X ఫైండర్‌లో FTPని కలిగి ఉంటుంది మరియు CyberDuck లేదా Filezilla ఉచితం) ఉపయోగించండి. ఇది సాధారణంగా సైట్‌ల ప్రధాన సూచిక ఫైల్ ఉన్న అదే స్థానం. అప్‌లోడ్ చేసిన తర్వాత, వెబ్ బ్రౌజర్‌ని తెరిచి, "http://SITEURL.com/apple-touch-icon.png"కి వెళ్లి, అది లోడ్ అవుతుందని నిర్ధారించుకోవడం ద్వారా ఇది సరైన స్థానంలో ఉందని నిర్ధారించండి.

OSXDaily.com నుండి 512×512 రెటీనా-రెడీ బుక్‌మార్క్ చిహ్నం యొక్క ఉదాహరణ ఇక్కడ ఉంది:

-ముందుగా కంపోజ్ చేసిన ఫ్లాగ్ లేకుండా, పై చిహ్నం హైలైట్ బబుల్‌ని ప్రదర్శిస్తుందని గమనించండి. బుక్‌మార్క్‌గా స్క్రీన్‌షాట్‌లలో చూపబడిన దానితో అసలు చిహ్నాన్ని పోల్చడం ద్వారా మీరు రెండింటి మధ్య వ్యత్యాసాన్ని చూడవచ్చు.

4) iOS పరికరాన్ని ఉపయోగించండి మరియు సైట్‌ని బుక్‌మార్క్ చేయండి

ఇది చాలా సులభమైన భాగం, iOS పరికరాన్ని (రెటీనా కోణాన్ని నిర్ధారించడానికి ఐప్యాడ్ 3ని ప్రాధాన్యమైనది) మరియు సఫారిని తెరవండి.మీరు చిహ్నాన్ని అప్‌లోడ్ చేసిన వెబ్‌సైట్‌ను రిఫ్రెష్ చేసి, ఆపై బాణం చిహ్నాన్ని నొక్కండి మరియు బుక్‌మార్క్ పేరు "హోమ్‌స్క్రీన్‌కు జోడించు" ఎంచుకోండి, ఆపై అది ఉన్నట్లు నిర్ధారించడానికి హోమ్‌స్క్రీన్‌కి తిరిగి వెళ్లండి.

512 x 512 పిక్సెల్‌లు ఉన్నప్పటికీ, పాత iPhoneలు మరియు నాన్-రెటీనా పరికరాలపై రెటీనా చిహ్నం బాగా తగ్గుతుంది. మీరు నిజంగా కోరుకుంటే, మీరు వివిధ పరికరాలకు విభిన్న పరిమాణ చిహ్నాలను ప్రదర్శించడానికి CSS మరియు HTMLని ఉపయోగించవచ్చు, కానీ ఇది నిజంగా అవసరం లేదు.

ఇప్పుడు ఎవరైనా మీ వెబ్‌సైట్‌ను ఐప్యాడ్‌లో రెటీనా డిస్‌ప్లేతో బుక్‌మార్క్ చేస్తే, అది వారి హోమ్ స్క్రీన్‌పై చాలా మెరుగ్గా కనిపిస్తుంది. అది నిజంగానే ఉంది. మరియు అవును, మేము ఇంతకు ముందు Apple టచ్ చిహ్నం గురించి వ్రాసాము, కానీ iPad 3 అధిక రిజల్యూషన్ చిహ్నాలు మరియు గ్రాఫిక్‌లను డిమాండ్ చేస్తున్నందున ఇది ఇప్పుడు మరొక ప్రస్తావనకు అర్హమైనది.

&ని ఎలా తయారు చేయాలి వెబ్‌సైట్ కోసం రెటీనా-రెడీ iOS బుక్‌మార్క్ చిహ్నాన్ని సెట్ చేయండి