it-swarm.dev

أيقونات تطبيق iPhone - بالضبط نصف القطر؟

أحاول إنشاء رمز لتطبيق iPhone الخاص بي ، لكن لا أعرف كيفية الحصول على دائرة نصف قطرها بالضبط التي تستخدمها رموز iPhone. لقد بحثت وبحثت عن برنامج تعليمي أو قالب ولكن لا يمكنني العثور عليه.

أنا متأكد من أنني مجرد معتوه ، ولكن كيف يمكنك الحصول على الزوايا الدائرية الصحيحة تمامًا باستخدام الرمز الخاص بك من Illustrator أو Photoshop؟

تصحيح:

ما هو دائرة نصف قطرها لشبكية العين باد؟

292
Frank Barson

يمكنك إنشاء أربعة أيقونات (اعتبارًا من اليوم) لتطبيقك ، ويمكن أن يكون لها جميعًا مظهر مختلف - لا يعتمد بالضرورة على صورة 512 × 512.

  • نصف قطر الزاوية لأيقونة 512 × 512 = 80 (iTunesArtwork)
  • نصف قطر الزاوية لأيقونة 1024 × 1024 = 180 (iTunesArtwork Retina )
  • نصف قطر الزاوية لأيقونة 57 × 57 = 9 (iPhone/iPod Touch)
  • نصف قطر الزاوية لأيقونة 114x114 = 18 (iPhone/iPod Touch Retina )
  • نصف قطر الزاوية لأيقونة 72 × 72 = 11 (iPad)
  • نصف قطر الزاوية لأيقونة 144x144 = 23 (iPad Retina )

إذا قمت بإنشاء مجموعة من الرموز المخصصة ، فيمكنك ضبط الخيار UIPrerenderedIcon على "true" في ملف info.plist الخاص بك ولن يضيف تأثير اللمعان ولكنه سيضع خلفية سوداء تحته ولا يزال يحيط بزوايا الصورة مع هذه الزاوية إذا كان نصف قطر الزاوية على أي من الرموز أكبر ، فسيظهر باللون الأسود حول الحواف/الزوايا.

تحرير: راجع التعليق من @ devin-g-rhode ويمكنك أن ترى أن أي أحجام أيقونات مستقبلية يجب أن تحتوي على نسبة 1:6.4 من نصف قطر الزاوية إلى حجم الرمز. هناك أيضًا إجابة جيدة جدًا من https://stackoverflow.com/a/29550364/396005 والتي تحتوي على موقع ملفات قناع الصور المستخدمة في SDK لتقريب زوايا الأيقونات

لإضافة ملف متوافق مع شبكية العين ، استخدم نفس اسم الملف وأضف "@ 2x". لذلك إذا كان لدي ملف لأيقونة 72 × 72 المسمى icon.png ، فسأضيف أيضًا ملفًا بتنسيق 114x114 PNG باسم [email protected] إلى المشروع/الهدف وسيستخدم Xcode ذلك تلقائيًا كرمز على شاشة شبكية العين. يمكنك رؤية ذلك قيد التنفيذ في صفحة الملخص الخاصة بهدف التطبيق إذا كنت قد قمت بذلك بشكل صحيح. نفس الشيء يعمل لصور الإطلاق. استخدم launch.png على 320x480 و [email protected] على 640x960.

329
Bron Davies

بعد تجربة بعض الإجابات في هذا المنشور ، تشاورت مع لوي مانتيا (مصمم Apple و Square و Iconfactory السابق) وجميع الإجابات التي وردت حتى الآن في هذا المنشور خاطئة (أو على الأقل غير مكتملة). تبدأ Apple برمز 57px ودائرة نصف قطرها 10 ثم يتم تحجيمها لأعلى أو لأسفل من هناك. وبالتالي يمكنك حساب نصف القطر لأي حجم رمز باستخدام 10/57 x new size (على سبيل المثال ، 10/57 x 114 يعطي 20 ، وهو نصف القطر المناسب لرمز 114px). فيما يلي قائمة بالرموز الأكثر استخدامًا ، واتفاقيات التسمية الصحيحة ، وأبعاد البكسل ، ونصف قطر الزاوية.

  1. Icon1024.png - 1024px - 179.649
  2. Icon512.png - 512 بكسل - 89.825
  3. Icon.png - 57px - 10
  4. [email protected] - 114px - 20
  5. Icon-72.png - 72px - 12.632
  6. [email protected] - 144px - 25.263
  7. Icon-Small.png - 29 بكسل - 5.088
  8. [email protected] - 58px - 10.175

أيضًا ، كما هو مذكور في الإجابات الأخرى ، فأنت لا تريد بالفعل اقتصاص أي من الصور التي تستخدمها في الملف الثنائي أو إرسالها إلى Apple. كل هذه يجب أن تكون مربعة وليس لديها أي شفافية. ستقوم Apple بإخفاء كل أيقونة تلقائيًا في السياق المناسب.

ومع ذلك ، من المهم معرفة ما سبق استخدام الرموز داخل التطبيق UI حيث يتعين عليك تطبيق القناع في الكود ، أو تقديمه مسبقًا في برنامج الفوتوشوب. إنه مفيد أيضًا عند إنشاء عمل فني لمواقع الويب والمواد الترويجية الأخرى.

قراءة إضافية:

نيفين مرجان على أحجام أيقونات إضافية واعتبارات تصميم أخرى: أحجام أيقونات تطبيق ios

Bjango Marc Edwards حول الخيارات المختلفة لإنشاء دائرية في Photoshop ولماذا يهم: دائرية

مستندات Apple الرسمية حول حجم الرمز واعتبارات التصميم: الرموز والصور

التحديث:

لقد أجريت بعض الاختبارات في Photoshop CS6 ويبدو أن 3 أرقام بعد العلامة العشرية هي الدقة الكافية لتنتهي بنفس المتجه الدقيق (على الأقل كما هو معروض بواسطة Photoshop بتكبير 3200٪). تقوم أداة Round Rect Tool أحيانًا بتقريب الإدخال إلى أقرب عدد صحيح ، لكن يمكنك أن ترى فرقًا كبيرًا بين 90 و 89.825. عدة مرات لم يتم تقريب أداة Round Rectangle Tool وأظهرت بالفعل أرقام متعددة بعد العلامة العشرية. لست متأكدًا مما يحدث هناك ، لكنه بالتأكيد يستخدم ويخزن الرقم الأكثر دقة الذي تم إدخاله.

على أي حال ، لقد قمت بتحديث القائمة أعلاه لتشمل 3 أرقام فقط بعد العلامة العشرية (قبل أن يكون هناك 13!). في معظم المواقف ، قد يكون من الصعب تحديد الفرق بين أيقونة شفافة تبلغ 512 بكسل مقنعة عند دائرة نصف قطرها 90px وأحد ملثمين عند 89.825 ، ولكن من المحتمل أن ينتهي الحواف المضادة للزاوية المدورة بشكل مختلف قليلاً ومن المحتمل أن تكون مرئية في ظروف معينة خاصة إذا تم تطبيق قناع ثاني أكثر دقة من قِبل Apple ، في الكود ، أو غير ذلك.

277
drbarnard

أرى الكثير من النقاش حول "px" لكن لا أحد يتحدث عن النسب المئوية وهو الرقم الثابت الذي تريد حسابه

15.625 ٪ هي النسبة الرئيسية هنا. اضرب أيًا من أحجام الصور المذكورة أعلاه في 0.15625 وستحصل على نصف قطر البكسل الصحيح لهذا الحجم.

EDIT: شكرًاChris Prince على التعليق بنسبة iOS 8/9/10 النسبة المئوية لنصف القطر: 22.37٪

29
bitwit

هام: معادلة أيقونة iOS 7

مع الإصدار القادم من iOS 7 ، ستلاحظ أن نصف قطر رمز "قياسي" قد زاد. لذا حاول أن تفعل ما اقترحته شركة Apple مع هذه الإجابة.

يبدو أنه بالنسبة للرمز 120px ، فإن الصيغة التي تمثل أفضل شكل لها على iOS 7 هي superellipse التالية:

|x/120|^5 + |y/120|^5 = 1

من الواضح أنه يمكنك تغيير رقم 120 مع حجم الرمز المطلوب للحصول على الوظيفة المقابلة.

الأصل

يجب عليك تقديم صورة ذات زاوية 90 درجة (من المهم تجنب اقتصاص زوايا الرمز الخاص بك - يعمل iOS لك عند تطبيق قناع التقريب الزاوية) ( وثائق Apple )

أفضل طريقة هي عدم تقريب زوايا الرموز على الإطلاق. إذا قمت بتعيين الرمز الخاص بك كرمز مربع ، فسوف يقوم iOS تلقائيًا بتراكب الأيقونة بقناع محدد مسبقًا يقوم بتعيين الزوايا الدائرية المناسبة.

إذا قمت بتعيين الزوايا الدائرية يدويًا على أيقوناتك ، فمن المحتمل أن تبدو مقطوعة في هذا الجهاز أو ذاك ، لأن قناع التقريب يتغير قليلاً من إصدار iOS إلى آخر. في بعض الأحيان ستكون أيقوناتك أكبر قليلاً ، وأحيانًا (تنهدات) أصغر قليلاً. سيؤدي استخدام رمز مربع إلى تحريرك من هذا العبء ، وستكون متأكدًا من أنه لديك دائمًا أحدث الرموز وحسن المظهر لتطبيقك.

هذه الطريقة صالحة لكل حجم رمز (iPhone/iPod/iPad/retina) ، وأيضًا لعمل iTunes الفني. لقد اتبعت هذا النهج عدة مرات ، وإذا أردت ، يمكنني أن أنشر لك رابطًا إلى تطبيق يستخدم رموز مربعة أصلية.

تحرير

لفهم هذه الإجابة بشكل أفضل ، يرجى الرجوع إلى الوثائق الرسمية Apple حول رموز iOS . من الواضح في هذه الصفحة أن أيقونة مربعة ستحصل تلقائيًا على هذه الأشياء عند عرضها على جهاز iOS:

  1. زوايا مدورة
  2. شبح الهبوط
  3. تألق عاكس (ما لم تمنع تأثير التألق)

لذلك ، يمكنك تحقيق أي تأثير تريده فقط رسم رمز مربع عادي وملء المحتوى فيه. سيكون نصف قطر الزاوية النهائية شيئًا مشابهًا لما تقوله الإجابات الأخرى هنا ، ولكن لن يتم ضمان ذلك أبدًا ، لأن هذه الأرقام ليست جزءًا من وثائق Apple الرسمية على نظام التشغيل iOS. يطلبون منك رسم رموز مربعة ، فلماذا لا؟

28
marzapower

تحتوي الإجابة من dbarnard على الصيغة لحساب نصف القطر الصحيح ، ولكن نظرًا لأنك كنت تبحث عن القوالب ، يمكن العثور على جميع الأقنعة والتراكبات في هذا الدليل:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(المسار مخصص للإصدارات الأخيرة من XCode. بالنسبة للإصدار الأقدم ، من المحتمل أن يكون داخل/Developer /).

كما لاحظ الآخرون ، يجب ألا تقنعهم بنفسك ، لكن يمكنك استخدامهم للتحقق من كيفية ظهور أيقوناتك مرة أخرى.

(الاعتمادات لهذا الاكتشاف يذهب إلى Neven Mrgan IIRC)

16
Agos

يزعم الأشخاص الذين يدورون حول دائرة نصف قطرها الزاوية زيادة طفيفة ولكن في الواقع هذا ليس هو الحال.

من هذه المدونة :

يكمن سر منتجات Apple المادية في أنها تتجنب الضبابية (حيث يلتقي نصف القطر بخط في نقطة واحدة) وصنع أسطحها بما يسمى استمرارية الانحناء .

 enter image description here 

أنت لا تحتاج لتطبيق نصف قطر الزاوية على أيقونات iOS. مجرد توفير الرموز مربع. ولكن إذا كنت لا تزال تريد معرفة كيف ، فسيتم استدعاء الشكل الفعلي Squircle وأدناه هي الصيغة:

 enter image description here 

11
Onur Yıldırım

يبلغ نصف قطر الزاوية لرمز 57 × 57 بكسل 9 بكسل.

7
willc2

كما قال الآخرون ، أنت لا تريد أن تدور حول زواياك. تريد شحن رسومات مربعة مسطحة (بدون طبقات أو ألفا). غيرت Apple القناع الذي يستخدمونه لتقريب الزوايا في iOS7 ثم مرة أخرى في iOS8. يمكنك العثور على هذه الأقنعة داخل حزمة تطبيق Xcode. يتغير المسار مع كل إصدار جديد من إصدار SDK. لذلك ، سأريك كيف يمكنك أن تجده دائمًا.

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

في هذه اللحظة بالذات ، المسار الذي عثر عليه هذا الأمر هو /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework لكن لا تثق بذلك. استخدم الأمر للعثور عليه بنفسك.

يشير هذا المسار إلى دليل به هذه الملفات (مرة أخرى ، في وقت هذا المنشور)

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./[email protected]~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./[email protected]
./[email protected]
./DefaultIcon-29.png
./[email protected]
./[email protected]
./DefaultIcon-40.png
./[email protected]
./[email protected]
./[email protected]~iphone.png
./[email protected]~iphone.png
./[email protected]~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[email protected]
./DocumentBadgeMask-20.png
./[email protected]
./[email protected]
./[email protected]~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[email protected]
./[email protected]
./[email protected]~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./[email protected]
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./[email protected]
./NewsstandNewspaperSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperSwitcherGradientRight.png
./[email protected]
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./[email protected]
./[email protected]
./SpotlightAppIconMask.png
./[email protected]
./[email protected]
./TableIconMask.png
./[email protected]
./[email protected]
./TableIconOutline.png
./[email protected]
./[email protected]

كما ترون ، هناك الكثير من الأقنعة المختلفة ، لكن تم تسميتها بوضوح تام. هذه هي الصورة [email protected]~iphone.png:

AppIconMask@3x~iphone.png

يمكنك استخدام ذلك ل اختبار الرمز الخاص بك لمعرفة ما إذا كان سيبدو على ما يرام بعد أن يتم إخفاءه. لكن لا تدور حول زواياك . إذا قمت بذلك ، عندما تقوم Apple بتغيير هذه الأقنعة مرة أخرى ، سيكون لديك قطع أثرية.

6
Bruno Bronosky

إذا لم يكن التفكير في الحد ، فإن نصف القطر المحدد هو في الواقع 10 بكسل للأيقونة 57x57.

أحصل على هذه المعلومات من iconreference .

5
Khomsan

جميع الإجابات السابقة على هذا السؤال أصبحت الآن قديمة. منذ أيار (مايو) 2015 على الأقل ، تطلب منك شركة Apple توفير رموز مربعة بدون تقريب:

حافظ على مربع زوايا الأيقونة. يطبق النظام قناعًا يقريب زوايا الأيقونة تلقائيًا.

https://developer.Apple.com/ios/human-interface-guidelines/graphics/app-icon/

5
Mark Whitaker

عند تصميم أيقونات التطبيق الخاصة بي باستخدام Photoshop ، وجدت أنه لا يوجد نصف قطر زاوية عدد صحيح يناسب قناع الجهاز بالضبط .

ما أقوم به الآن هو إنشاء مشروع فارغ باستخدام Xcode ، وتعيين ملف PNG أبيض تمامًا كرمز ، وإيقاف التشغيل المسبق والمائل. بعد ذلك ، أقوم بتشغيل التطبيق والتقاط لقطة للشاشة الرئيسية. الآن ، يمكنك بسهولة إنشاء قناع من تلك الصورة ، والتي يمكنك استخدامها في Photoshop. هذا سوف تحصل على زوايا مدورة تماما.

4
ryyst

تقريب زوايا آيفون ، كل ما تحتاجه هو أيقونة 57x57 png مربعة ويجب أن تكون جيدًا

3
Daniel

هناك إجابتان متعارضتان تمامًا مع وجود عدد كبير من الأصوات ، واحدة هي 160px @ 1024 والآخر 180px @ 1024. ساحرة جدا؟

لقد أجريت بعض التجارب وأعتقد أنها 180px @ 1024 لذلك drbarnard هو الصحيح.

لقد قمت بتنزيل رمز iTunes U من App Store وهو بحجم 175 × 175 بكسل. قمت بترقيته في برنامج فوتوشوب إلى 1024 بكسل ووضع شكلين عليه ، أحدهما بنصف قطر 160px وواحد مع 180px.

كما يمكنك أن ترى أدناه الشكل (الخط الرمادي الرفيع) مع 160 بكسل (الأول) هو قليلاً في حين أن الشكل 180px يبدو جيدًا.

shape with 160px radiusenter image description here

هذا ما أقوم به الآن في PhotoShop:

  1. أقوم بإنشاء حجم قماش 1026 × 1026 بكسل مع 180 بكسل قناع للتصميم الرئيسي كائن ذكي .
  2. أقوم بتكرار الكائن الذكي الرئيسي 5 مرات وقم بتغيير حجمه إلى 1024 بكسل و 144 بكسل و 114 بكسل و 72 بكسل و 57 بكسل.
  3. لقد وضعت "شريحة مبنية على طبقات جديدة" على كل الكائنات الذكية وأعيد تسمية الشرائح وفقًا لحجمها (على سبيل المثال ، icon-72px).
  4. عندما أقوم بحفظ العمل الفني ، حدد "جميع شرائح المستخدم" و BANG! لدي كل الرموز اللازمة لتطبيقي.
2
Tibidabo

حاولت 228px دائرة نصف قطرها ل 1024 x1024 وعملت :)

2
Ruby

التحديث (اعتبارًا من يناير 2018) لمتطلبات أيقونة التطبيق:


https://developer.Apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

حافظ على مربع زوايا الأيقونة . يطبق النظام قناعًا يدور حول زوايا الأيقونة تلقائيًا.

حافظ على الخلفية بسيطة وتجنب الشفافية . تأكد من أن الرمز الخاص بك غير شفاف ، ولا تشوش الخلفية. امنحها خلفية بسيطة حتى لا تتغلب على رموز التطبيقات الأخرى القريبة. لا تحتاج إلى ملء الرمز بالكامل بالمحتوى.

2
agirault

لا تحتاج إلى تطبيق نصف قطر الزاوية على أيقونة التطبيق الخاص بك ، يمكنك فقط تطبيق الرموز المربعة. يقوم الجهاز تلقائيًا بتطبيق نصف قطر الزاوية.

0
Vinayak