ستتعلم في هذا البرنامج التعليمي كيفية رسم رمز مجلد مستندات بسيط في Adobe Photoshop.

الصورة النهائية:

الخطوة 1

افتح Photoshop وقم بإنشاء مستند جديدللقيام بذلك، اضغط على تركيبة المفاتيح Control + N. في القائمة التي تفتح، أدخل البيانات التالية:

ملاحظة المترجم: في لقطة الشاشة

• ارتفاع (العرض): 600 بكسل(بكسل)
• عرض (العرض): 600 بكسل(بكسل)
• إذن (دقة): 72 بكسل/بوصة(بكسل/ بوصة)
• وضع اللون (لونوضع): RGBلون, 8 قليل
• محتوى خلفية (محتويات الخلفية):أبيض (أبيض)
• لون حساب تعريفي (ملف تعريف الألوان): sRGB IEC61966-2.1
• لكل بكسل حَجم (نسبة العرض إلى الارتفاع للبكسل):مربع بكسل (بكسل مربع)

بعد إدخال البيانات اضغط على موافق.

ثم عرض الشبكة عرض - عرض - الشبكة(عرض> عرض> الشبكة) وقم بتمكين ميزة Snap to Grid Lines عرض - انجذاب إلى - خطوط الشبكة(عرض - انطباق على - الشبكة). نحتاج الآن إلى تكوين إعدادات الشبكة، انتقل إلى (Edit > Preferences > Guides, Grid & Slices) وركز على القسم شبكة(شبكة). أدخل القيمة 5 في الحقل "سطر كل"(خط الشبكة كل) و1 في هذا المجال "التقسيم الداخلي حسب"(تقسيم فرعي). اضبط لون الشبكة على #a7a7a7.

بعد ضبط كافة الإعدادات، انقر فوق "موافق". لا تشتت انتباهك بالشبكة، فهي ستجعل عملنا أسهل في المستقبل. يمكنك دائمًا تعطيل الشبكة أو تمكينها باستخدام اختصار لوحة المفاتيح CTRL + ". يجب عليك أيضًا فتح لوحة المعلومات ( نافذة - معلومات(نافذة > معلومات)) لتتمكن حاليًا من عرض حجم الأشكال وموضعها.

الخطوة 2

اضبط اللون الأمامي على اللون البني الفاتح (#c69c6d) وحدد أداة Rounded Rectangle Tool. في الجزء العلوي من شريط الأدوات، قم بتعيين نصف القطر إلى 5 بكسل وقم بإنشاء شكل متجه بحجم 105 × 15 بكسل. ثم، أن تكون على الطبقة ذات الشكل المتجه (المستطيل مع حواف مدورة، الذي أنشأناه للتو)، حدد العملية دمج الأشكال(أضف إلى منطقة الشكل) وأضف مستطيلاً آخر بحواف مستديرة قياس 40x20 بكسل، ثم ضعه كما هو موضح في الصورة أدناه.

الخطوه 3

اذهب إلى اللوحة طبقات(الطبقات) (إذا لم تكن لوحة الطبقات مرئية، فانتقل إلى نافذة - طبقات(نافذة - طبقات)) وإعادة التسمية شكل ناقلاتإلى "الرجوع" ثم انقر نقرًا مزدوجًا على الطبقة لفتح النافذة نمط الطبقة(نمط الطبقة). قم بتطبيق التأثيرات التالية على الطبقة: الظل الداخلي(الظل الداخلي) و تغطية بالتدرج اللوني(تغطية بالتدرج اللوني).

ملاحظة المترجم: في لقطات الشاشة

الظل الداخلي:

• وضع المزج (وضع المزج): تداخل(تراكب)، اللون أبيض (#ffffff)
• العتامة (التعتيم): 75%
• ركن (الزاوية): 90 درجة
• الإضاءة العالمية
• تحيز (المسافة): 1 بيكسل
• التقلص (الاختناق): 0%
• مقاس (الحجم): 1 بيكسل
• التنعيم
• ضوضاء (الضوضاء): 0%

تغطية بالتدرج اللوني

• وضع المزج (وضع المزج): تداخل(تراكب)
• العتامة (التعتيم): 100%
• الانحدار (التدرج): محرر التدرج
• اللون #000000 الموضع 40%
• اللون #232323 الموضع 80%
• اللون #505050 الموضع 100%
• محاذاة إلى الطبقة (محاذاة مع الطبقة): حدد المربع
• أسلوب (أسلوب): خطي(خطي)
• ركن (الزاوية): 90 درجة
• حجم (المقياس): 100%

الخطوة 4

تأكد من أن لون المقدمة لا يزال مضبوطًا على اللون البني الفاتح (#c69c6d)، ثم حدد الأداة مستطيل مع زوايا مدورة (أداة المستطيل المدور). أنشئ شكلًا متجهًا مقاس 115 × 75 بكسل، ثم ضعه كما هو موضح في الصورة الأولى، ثم انتقل إلى التحرير- التحول - التشوه(تحرير - تحويل - اعوجاج). في الأعلى حدد:

• التشوه(اعوجاج): محدب(انتفاخ)
• زر التمكين: تحرير توجيهتشوه(توجيه)
• يلوي(الانحناء): 5%
• ثَبَّتَ تشويه عمودي(تشويه عمودي) الخامس: -3%

بعد ذلك اضغط على Enter. يجب أن تحصل على نفس النتيجة كما في الصورة الثانية. ثم أعد تسمية الطبقة، أطلق عليها اسم "الجبهة".

الخطوة 5

انتقل إلى الطبقة المسماة "الجبهة" وقم بتطبيق التأثيرات التالية:

الظل الداخلي(الظل الداخلي):

• وضع المزج(وضع المزج): تداخل(تراكب)، اللون أبيض (#ffffff)
• العتامة(التعتيم): 50%
• ركن(الزاوية): 90 درجة
• الإضاءة العالمية(استخدم الضوء العالمي): قم بإلغاء التحديد
• تحيز(المسافة): 3 بيكسل
• التقلص(الاختناق): 0%
• مقاس(الحجم): 5 بكسل
• التنعيم(مضاد للاستعارة): قم بإلغاء التحديد
• ضوضاء(الضوضاء): 0%

التوهج الداخلي(التوهج الداخلي):

• وضع المزج(وضع المزج): ضوء خافت (ضوء خافت)
• العتامة(التعتيم): 25%
• طريقة(تقنية): ليونة
• مصدر(مصدر): على الحواف(حافة)
• التقلص(الاختناق): 0%
• مقاس(الحجم): 10 بيكسل
• التنعيم(مضاد للاستعارة): قم بإلغاء التحديد
• يتراوح(المدى): 50%
• تردد(الارتعاش): 0%

النقش(شطبة وزخرف):

• أسلوب(النمط): شطبة داخلية
• طريقة(تقنية): سلسة
• عمق(العمق): 100%
• اتجاهالاتجاه: لأعلى
• مقاس(الحجم): 100 بكسل
• تخفيف(تنعيم): 0 بكسل
• ركن(الزاوية): 90 درجة
• ارتفاع(الارتفاع): 30°
• الإضاءة العالمية(استخدم الضوء العالمي): قم بإلغاء التحديد
• دائرة كهربائيةلمعان(محيط اللمعان): تموجيميل(المنحدر المتداول - تنازلي)
• التنعيم(مضاد للاستعارة): قم بإلغاء التحديد
• وضعالإضاءة الخلفية(وضع التمييز): عمليه الضرب(اضرب)، اللون أسود #000000
• العتامة(التعتيم): 30%
• وضعالظلال(وضعية الظل): تداخل(تراكب)، اللون أبيض #ffffff
• العتامة(التعتيم): 30%

تراكبالانحدار(تغطية بالتدرج اللوني):

• وضعتراكبات(وضع المزج): عمليه الضرب(تتضاعف)
• العتامة(التعتيم): 100%
• الانحدار(التدرج): محرر التدرج
• اللون #7с7с7с الموضع 0%
• اللون #959595 الموضع 10%
• لون #عفاف موقف 25%
• لون #ففافا موقف 100%
• محاذاة إلى الطبقة(محاذاة مع الطبقة): حدد المربع
• أسلوب(أسلوب): خطي(خطي)
• ركن(الزاوية): 90 درجة
• حجم(المقياس): 100%

تراكب النمط(تراكب طقطق):

• وضع المزج(وضع المزج): تداخل(تراكب)
• العتامة(التعتيم): 90%
• نمط(Patter): حدد النمط الأغمق من أنماط الجلود القابلة للبلاط المحايدة
• حجم(المقياس): 25

ملاحظة المترجم: للتحميل نمط (طققع) الجلد، وانقر على الترس وحدد تحميل الأنماط في القائمة التي تفتح. بعد ذلك، انتقل إلى المجلد الذي يحتوي على أنماط الجلود التي قمت بتنزيلها وحدد أنماط الجلود webtreats.تربيتة.

الخطوة 6

اضبط لون المقدمة على اللون الأسود (#000000) وحدد الأداة الشكل البيضاوي(أداة القطع الناقص). قم بإنشاء شكل متجه بحجم 105 × 5 بكسل وضعه كما هو موضح في الصورة الأولى. انقر انقر على اليمينمرر الماوس فوق الطبقة التي أنشأناها للتو، ثم حدد من القائمة المنسدلة تحويل إلى كائن ذكي(تحويل إلى كائن ذكي). ضع هذه الطبقة فوق الخلفية (Shift + CTRL + [) وانتقل إلى (Filter - Blur - Gaussian Blur)، وأدخل نصف قطر قدره 3 بكسل وانقر فوق "موافق".

الخطوة 7

حدد أداة الشكل البيضاوي(أداة القطع الناقص). قم بإنشاء شكل متجه بحجم 105 × 10 بيكسل وضعه كما هو موضح في الصورة الأولى. ثم انقر بزر الماوس الأيمن على الطبقة وقم بتحويلها إلى موضوع ذكي(تحويل إلى كائن ذكي). ضع هذه الطبقة فوق الخلفية (Shift + CTRL + [). بعد ذلك اذهب الى مرشح - طمس - طمس غاوسي(Filter - Blur - Gaussian Blur) وأدخل نصف قطر قدره 3 بيكسل.

الخطوة 8

اضبط لون المقدمة على #aecef5، وحدد الأداة مستطيل(أداة المستطيل) وأنشئ مستطيلاً بأبعاد 105 × 70 بكسل، وضعه كما هو موضح في الصورة الأولى. حدد الطبقة ذات المستطيل الأزرق واضغط على CTRL + T (أو انتقل إلى تحرير - تحويل - تدوير(تحرير - تحويل - تدوير)). في الجزء العلوي، أدخل زاوية دوران قدرها -4° ثم اضغط على Enter.

انقل الطبقة ذات المستطيل الأزرق أسفل الطبقة "الأمامية". يفتح نمط الطبقة(نمط الطبقة) وحدد تأثيرًا سكتة دماغية(سكتة دماغية).

ملاحظة المترجم: ليؤثر سكتة دماغية(السكتة الدماغية) تنطبق الإعدادات التالية(على لقطة الشاشة):

• مقاس (الحجم): 1 بيكسل.
• موضع (موضع): داخل (داخل)
• وضع المزج (يمزجوضع): طبيعي (طبيعي)
• العتامة (التعتيم): 100%
• لون (اللون): #90ب0د7

بعد ذلك، انقر بزر الماوس الأيمن على طبقة المستطيل الأزرق واختر نسخ نمط الطبقة(نسخ نمط الطبقة)

الخطوة 9

ل الخطوات التاليةنحن بحاجة إلى شبكة مع الإعدادات "سطر كل"(خط الشبكة كل) 1 بيكسل لذا اذهب إلى التحرير - الإعدادات - الأدلة والشبكة والشرائح(تحرير > التفضيلات > الأدلة والشبكة والشرائح) وأدخل 1 في الحقل "سطر كل"(خط الشبكة كل). حدد أداة مستطيل(أداة المستطيل) وأنشئ مستطيلاً بأبعاد 105 × 70 بكسل، وضعه كما هو موضح في الصورة الأولى. اضغط على CTRL + T، وأدخل زاوية الدوران -5 درجة في الأعلى ثم اضغط على Enter.

انقل هذه الطبقة أسفل الطبقة ذات المستطيل الأزرق الأول، ثم انقر بزر الماوس الأيمن عليها واختر من القائمة التي تفتح لصق نمط الطبقة(لصق نمط الطبقة).

الخطوة 10

حدد أداة مستطيل(أداة المستطيل) وقم بإنشاء مستطيل بأبعاد 105 × 70 بيكسل، ضعه كما هو موضح في الصورة الأولى واضغط على CTRL + T. في الجزء العلوي، أدخل زاوية دوران قدرها 3 درجات واضغط على Enter.

حرك هذه الطبقة أسفل الطبقة « front"، ثم انقر بزر الماوس الأيمن عليه واختر من القائمة التي تفتح لصق نمط الطبقة(لصق نمط الطبقة).

الخطوة 11

تعطيل الشبكة ( عرض - عرض - الشبكة(عرض > عرض > الشبكة)) وكرر الطبقة المسماة "الجبهة" (CTRL + J). امسح نمط الطبقة المكررة بالنقر بزر الماوس الأيمن على الطبقة وتحديدها مسح نمط الطبقة(مسح نمط الطبقة).

يقلل حشوة(ملء) الطبقة المكررة إلى 0%.

ثم اذهب الى الطبقة - نمط الطبقة - خيارات المزج(Layer > Layer Style > Blending Options) وقم بتطبيق التأثيرات التالية:

ملاحظة المترجم: في لقطات الشاشة

الظل الداخلي (الظل الداخلي):

• وضع المزج (وضع المزج): ضوء خافت(ضوء ناعم)، اللون أبيض (#ffffff)
• العتامة (التعتيم): 100%
• ركن (الزاوية): 90 درجة
• الإضاءة العالمية
• تحيز (المسافة): 1 بيكسل
• التقلص (الاختناق): 0%
• مقاس (الحجم): 0 بكسل
• التنعيم
• ضوضاء (الضوضاء): 0%

توهج خارجي (التوهج الخارجي):

• وضع المزج (وضع المزج): طبيعي(طبيعي)
• العتامة (التعتيم): 40%
• ضوضاء (الضوضاء): 0%
• طريقة (تقنية): ناعمة(أكثر ليونة)
• نِطَاق (السبريد): 0%
• مقاس (الحجم): 4 بكسل

الخطوة 12

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

افتح مربع الحوار Layer Style، ثم انتقل إلى خيارات المزج(خيار المزج) وحدد المربع قناع الطبقة يخفي التأثيرات(تأثيرات قناع الطبقة المخفية) . بعد ذلك، اضغط على مجموعة المفاتيح Ctrl + D لإلغاء التحديد.

الخطوة 13

اختر من شريط الأدوات النص الأفقي (أداة الكتابة الأفقية) وأضف "docs" كما هو موضح في الصورة الأولى. قم بتطبيق خط يسمى Eras Bold ITC على نص "docs" واضبط حجم الخط على 30 نقطة. ثم قم بتقليل تعبئة طبقة النص إلى 0%.

اذهب إلى نمط الطبقة(نمط الطبقة) وقم بتطبيق التأثيرات التالية:

ظل(شبح الهبوط):

• وضع المزج(وضع المزج): ضوء خافت(ضوء ناعم)، اللون أبيض (#ffffff)
• العتامة(التعتيم): 100%
• ركن(الزاوية): 90 درجة
• الإضاءة العالمية(استخدم الضوء العالمي): قم بإلغاء التحديد
• تحيز(المسافة): 1 بيكسل
• نِطَاق(السبريد): 0%
• مقاس(الحجم): 0

الظل الداخلي(الظل الداخلي):

• وضع المزج(وضع المزج): ضوء خافت(ضوء ناعم)، أسود (#000000)
• العتامة(التعتيم): 100%
• ركن(الزاوية): 90 درجة
• الإضاءة العالمية(استخدم الضوء العالمي): قم بإلغاء التحديد
• تحيز(المسافة): 1 بيكسل
• التقلص(الاختناق): 0%
• مقاس(الحجم): 8 بكسل
• التنعيم(مضاد للاستعارة): قم بإلغاء التحديد
• ضوضاء(الضوضاء): 0%

النقش(شطبة وزخرف):

• أسلوب(أسلوب): شطبة داخلية(شطبة داخلية)
• طريقة(تقنية): سلس(سلس)
• عمق(العمق): 100%
• اتجاه(اتجاه): أعلى(أعلى)
• مقاس(الحجم): 2 بكسل
• تخفيف(التنعيم): 5 بيكسل
• ركن(الزاوية): 90 درجة
• ارتفاع(الارتفاع): 30 درجة
• الإضاءة العالمية(استخدم الضوء العالمي): قم بإلغاء التحديد
• التنعيم(مضاد للاستعارة): قم بإلغاء التحديد
• وضع الإضاءة الخلفية(وضع التمييز): ضوء خافت(ضوء ناعم)، اللون أسود #000000
• العتامة(التعتيم): 80%
• وضعية الظل(وضعية الظل): طبيعي(عادي)، اللون أسود #000000
• العتامة(التعتيم): 0%

سكتة دماغية(سكتة دماغية):

• مقاس(الحجم): 1 بيكسل
• موضع(موضع): داخل(داخل)
• وضع المزج(وضع المزج): ضوء خافت(ضوء خافت)
• العتامة(التعتيم): 100%
• نوع السكتة الدماغية(نوع التعبئة): لون(لون)
• لون(اللون): أسود #000000

الخطوة 14

لقد انتهينا، الآن يمكنك بسهولة تغيير لون الأيقونة. اذهب إلى اللوحة طبقات(طبقة)، ركز انتباهك عليها أشكال المتجهاتمع ضبط اللون على #c69c6d واستبدله ببساطة باللون الذي تفضله.

ملاحظة المترجم: لتغيير لون الأيقونة (المجلد) حدد الطبقة المسماة"الأمامية"، ثم انقر نقرًا مزدوجًا على الصورة المصغرة للطبقة وحدد اللون المناسب في منتقي الألوان. افعل الشيء نفسه بالنسبة للطبقة المسماة "العودة".

هذا ما يجب أن تبدو عليه النتيجة النهائية.

يعد التصميم المسطح اتجاهًا جديدًا نسبيًا في تطوير واجهات الويب. يتكيف iOS وحتى Windows تدريجيًا مع هذا الأسلوب، وقريبًا ستتبنى جميع مواقع الويب تقريبًا (إن لم يكن كلها) هذا الأسلوب.

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

وبناء على ما سبق يطرح السؤال نفسه: " لماذا لا تبدأ في إعادة تصميم واجهتك اليوم؟"؟ بهذه الطريقة يمكنك أن تكون متقدمًا على الباقي بخطوة!

قد تعتقد، " أين يجب أن تبدأ؟"بالطبع، إعادة بناء تصميم موقع الويب هو عمل جهنمي. هذه المقالة مخصصة لهذا الشيء بالذات - وستكون يد العون لك في هذه المسألة الصعبة.

الخطوة الأولى الجيدة في إعادة صياغة التصميم المجسم لموقعك هي تغيير الصور المستخدمة في عناصر الواجهة إلى نمط تصميم مسطح. ربما تكون هذه هي أبسط خطوة لأنها لا تتطلب أي إعادة صياغة للكود تقريبًا.

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

سأحاول في هذه المقالة أن أجعل مهمة إعادة تصميم التصميم أسهل وأتحدث عن كيفية إنشاء أيقونات التنقل بأسلوب مسطح. سأستخدم الرسم حزمة أدوبي Photoshop CS6 (ولكن يمكنك استخدام أكثر من الإصدارات المبكرة). استعد - نحن على وشك البدء.

وهنا النتيجة النهائية لدينا:

افتح برنامج فوتوشوب. يخلق ملف جديد، باستخدام الإعداد المسبق "صورة" (صورة) ( 10×8 بوصة، 300 نقطة لكل بوصة، خلفية شفافة, نظام الألوان RGB).

اختر الأداة " مستطيل ذو زوايا مستديرة" (مستطيل مستدير الزوايا) وإنشاء شخصية جديدةمع الأبعاد 1736 × 1736 بكسل(بيكسل)، نصف قطر الشرائح 83 بيكسل واللون #82d8b5 . يمكنك أيضًا تعيين اللون الخاص بك، والذي يتناسب بشكل أفضل مع تصميم موقعك.

ثم باستخدام أداة القلم ( أداة القلم) وارسم شيئًا مشابهًا للصورة أدناه. استخدمي اللون #a30d00 . وهذا سيكون سقف منزلنا، مشيرا الصفحة الرئيسيةموقع.

بعد ذلك، دون تبديل أداة القلم، قم بإنشاء شكل مستطيل كما هو موضح في الصورة أدناه. عند القيام بذلك، استخدم اللون #ffffff . أيضًا، ارسم مربعًا صغيرًا باستخدام أداة المستطيل باللون #3498db.

أرسل الظل إلى أدنى موضع وقم بتنقيط هذه الطبقة. باستخدام " العصا السحرية "(أداة العصا السحرية)، أنشئ تحديدًا على الطبقة بمستطيل كبير زوايا مدورة، الذي يقع بداخله منزلنا، ثم قم بعكس المنطقة المحددة (يمكنك استخدام اختصار لوحة المفاتيح CMD/CTRL+Shift+I). دون إزالة التحديد، حدد طبقة الظل واضغط على زر "حذف".

الأيقونة جاهزة. لحفظه، انقر فوق " ملف>حفظ للويب والأجهزة..» (ملف>حفظ للويب) ( مفتاح الاختصار CTRL + Shift + ALT + S). احفظ الرمز بتنسيق PNG-24 مع تمكين الشفافية.

نريد أن يتم حفظ كل شيء بتنسيق PNG-24 مع دعم الشفافية.

الآن دعونا نلقي نظرة على أيقونة النشر:

يمكنك أدناه رؤية أيقونات "نبذة عني" و"اتصل بي":

يمكن تنزيل جميع الرموز هنا.

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

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

ومع ذلك، تذكر أن كلا التنسيقين غير مدعومين بواسطة IE ولن يعملا فيه.

أيقونة مفضلة متعددة الأحجام
بالإضافة إلى الأيقونة المفضلة المعتادة بقياس 16x16 بكسل والتي تستخدم للتصميم شريط العنوان، ويوجد منه تشكيلة بأبعاد 32×32 بكسل و48×48 بكسل. هذه الرموز شائعة جدًا في بيئة ويندوز. على سبيل المثال، إذا كنت تريد وضع اختصار لصفحة ويب على سطح المكتب، فسيحاول Windows تلقائيًا استخدام الرمز المفضل كصورة للاختصار. لكن الحجم القياسي (16 × 16 بكسل) لن يكون كافيًا لعرض عالي الجودة، نظرًا لأن حجم الاختصار القياسي في نظام التشغيل Windows هو 48 × 48 بكسل - وهذا يعني أن الاختصار سيتم تمديده إلى الأحجام المطلوبةوسوف تصبح قبيحة وغير قابلة للقراءة عمليا.

ومع ذلك، هناك طريقة لتصحيح هذا النقص. خاصية مفيدة ico هي أنها يمكن أن تحتوي على العديد من المتغيرات لنفس الرمز بأحجام وألوان مختلفة (على غرار قدرة ملفات .gif على احتواء العديد من الإطارات). لذلك، إذا قمت بوضع صورة في favicon.ico بأحجام متعددة وبأعماق ألوان مختلفة، فيمكن لنظام Windows تلقائيًا تحديد المعلمات الأكثر ملاءمة لتطبيقها على الاختصار. أحجام الملصقات الأكثر شيوعًا التي يمكن استخدامها هي 16x16 و24x24 و32x32 و48x48 بكسل.

إن إنشاء أيقونة متعددة الأحجام ليس أكثر صعوبة من إنشاء أيقونة مفضلة عادية مقاس 16 × 16 بكسل. البرنامج المساعد المطلوبيمكننا العثور على كل شيء على نفس موقع Telegraphics، وسيسمح لك بوضع عدة أيقونات في ملف .ico واحد. من حيث المبدأ، هذا ليس حتى البرنامج المساعد، ولكن برنامج منفصل، والتي يمكن استخدامها في نظامي التشغيل Windows (عبر سطر الأوامر)، وعلى نظام التشغيل MacOS (عبر السحب والإفلات). يحتوي هذا البرنامج أيضًا على نظائرها، مثل: Sib Icon Studio (www.sibcode.com/icon-studio) و Any to Icon Converter (www.aha-soft.com/anytoicon).

فيما يتعلق بعمق الألوان، ربما لاحظت أن بعض الرموز لها حواف خشنة، بينما يعمل البعض الآخر على تنعيم الحواف الخشنة وتبدو جميلة حقًا. وهذا ممكن بفضل عمق الألوان 32 بت، الذي يعرض شفافية حقيقية، تمامًا مثل Photoshop. يمكنك إنشاء إصدار 32 بت من الأيقونة بالإضافة إلى 24 بت (16 مليون لون، مع دعم الشفافية كما في ملفات .gif)، و16 بت (256 لونًا) وحتى 8، 4، أو نسخة 2 بت، ووضعها كلها في ملف ico واحد.

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

16 × 16، 16 بت (256) لونًا
16×16، ألوان 32 بت
32×32، 16 بت (256) لونًا
32×32، ألوان 32 بت
48 × 48، 16 بت (256) لونًا
48×48، ألوان 32 بت

لكن لا تبالغ في إنشاء العديد من الخيارات، لأنه مع كل إضافة، يزداد حجم favicon.ico، مما قد يؤثر سلبًا على تحميله.

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

هناك طريقة أخرى لحل هذه المشكلة وهي اتباع رابط مباشر إلى "الرمز المفضل" الخاص بك (على سبيل المثال: http://site/favicon.ico)، وبعد ذلك سيعرض المتصفح (IE) الرمز على الفور ويتذكره.

مشاكل توافق المتصفح
قد لا يعرض Microsoft IE 6 (و7 و8 و9) الرمز المفضل حتى تتم إضافة رابط صفحتك إلى المفضلة. في هذه الحالة، جرب الخيار التالي - اضغط باستمرار على زر الماوس الأيسر على "الرمز المفضل" المعروض (عادة رمز قياسي IE)، ثم "هزه" ثم حرره. ستعمل هذه الإجراءات على إعادة تحميل الصفحة وتحديث الرمز. هناك طريقة أخرى لحل هذه المشكلة وهي إضافة الكود التالي إلى قسم "" من الصفحات التي تريد أن يظهر فيها "الأيقونة المفضلة":

< link rel= "shortcut icon" href= "favicon.ico" > < link rel= "icon" type= "image/ico" href= "favicon.ico" >

لن يعرض Safari لنظام التشغيل Mac الأيقونة المفضلة المحدثة حتى يتم مسح ذاكرة التخزين المؤقت للمتصفح. ومع ذلك، فإن النقر على زر القائمة "إفراغ ذاكرة التخزين المؤقت" لن يحل المشكلة، حيث يقوم "Safari" بتخزين الرموز فيه مجلد منفصل. لمسح مجلد ذاكرة التخزين المؤقت للأيقونات، انتقل إلى قائمة "Edit > Reset Safari" وحدد المربع بجوار "إزالة جميع أيقونات مواقع الويب". هناك طريقة بديلة (يدوية) وهي حذف محتويات المجلد التالي: "User>Library>Safari>Icons". بالنسبة لإصدار Windows من "Safari"، يختلف المسار قليلاً: "C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari"، في هذا المجلد تحتاج إلى حذف الملف "WebpageIcons.db" . اسمحوا لي أن أذكرك أن مجلد "الإعدادات المحلية" ومجلداته الفرعية تكون مخفية بشكل افتراضي، مما يعني أنه من أجل الوصول إليها، تحتاج إلى تكوين العرض الملفات المخفيةو مجلدات ويندوز. بعد حذف الملفات المذكورة أعلاه، تحتاج إلى إعادة تشغيل "Safari" (في بعض الحالات، تحتاج أيضًا إلى إعادة تشغيل جهاز الكمبيوتر الخاص بك).

لحل مشكلة مماثلة في " موزيلا فايرفوكس"تحتاج إلى مسح ذاكرة التخزين المؤقت للمتصفح الخاص بك وإعادة تشغيل البرنامج.

لا توجد مثل هذه المشكلة في متصفح Opera، لذا يكفي تحديث الأيقونة الخاصة بك تحديث بسيطالصفحات (ربما عدة مرات).

مشكلة أخرى في Windows هي تحديث أيقونات صفحات الإنترنت (على سبيل المثال، عند وضع رمز الصفحة على سطح المكتب). ل التحديث القسريبعد تغيير الأيقونات، عليك القيام بالخطوات التالية:
1. انقر بزر الماوس الأيمن على سطح المكتب.
2. حدد عنصر القائمة "خصائص" (لـ "Windows XP") أو "تخصيص" (لـ "" ويندوز فيستا" أو "Windows 7") وانتقل إلى علامة التبويب "خصائص العرض" ؛
3. قم بتغيير جودة عرض الألوان من 32 بت إلى 16 بت وانقر فوق الزر "موافق" أو "تطبيق"؛
4. قم بتغيير جودة الألوان مرة أخرى إلى 32 بت وانقر فوق "موافق" أو "تطبيق".

مشاكل في البرنامج المساعد "Photoshop" للعمل مع الرموز
لن يكون تنسيق Windows Icon (ICO) متاحًا في حالة:
1. لقد قمت بتثبيت البرنامج المساعد بشكل غير صحيح؛
2. لقد حددت بشكل غير صحيح إصدار البرنامج الإضافي المناسب لنظام التشغيل لديك؛
3. مساحة العملفي Photoshop لم يتم إنشاؤه في أوضاع RGB ذات 1 أو 4 أو 8 بت أو 24 بت.

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

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

يعتقد العديد من الأشخاص خطأً أن هذا يكفي لـ ICO، وسيتم تحويل الصورة على الفور إلى هذا الرمز بالذات. اوه حسناً. جرب ذلك بنفسك وستحصل على خطأ عندما تحاول استبدال صورة الاختصار. بشكل عام، دعونا نفعل ما هو أفضل من الكلام) دعنا نذهب!

أريد الآن تغيير رمز متصفح Google Chrome. ما هي أفضل طريقة للتعامل مع هذه الحالة؟ دعنا نذهب بالترتيب.

ماذا تفعل بعد ذلك؟ فكيف يمكننا إذن أن نصنع أيقونة؟ نعم، انها الابتدائية. سيساعدنا أحد المكونات الإضافية الخارجية (الوظيفة الإضافية) في ذلك، بفضل التنسيق الذي نحتاجه سيصبح متاحا للحفظ. بشكل عام، هيا، كرر بعدي.

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

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

مهم!اذا كنت تمتلك صورة كبيرة، فعند الحفظ لن ترى تنسيق ico في قائمة التنسيقات المقبولة. الحقيقة هي أن هذه الميزة غير متوفرة إذا تجاوز حجم صورتك 256*256. إذا كان الأمر كذلك، فما يصل إلى 64*64 فقط. لا أعتقد أنك ستحتاج إلى المزيد. بعد الاستبدال، سيكون الامتداد متاحًا.

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

إذا كيف؟ هل لديك الرغبة في تحديث التسميات الخاصة بك؟ يمكنك تجربة سطح المكتب الخاص بك وتحويله قليلاً.

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

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

مع أطيب التحيات، ديمتري كوستين.

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

خلق أيقونات (ico) الخامس محل تصوير- موقع YouTube
يتخطى. شهر مجاني. خلق أيقونات (ico) الخامس محل تصويرقم بتحرير الصور بدقة استثنائية باستخدام أدوات وسير عمل بديهية جديدة خلق رسومات ثلاثية الأبعادومشاريع ثنائية الأبعاد..

كيف يفعل أيقونة ico الخامس محل تصوير| وقت الفن
يضيف الخامس محل تصويرشكل عرض أولي للعملة. بالأمس كنت أرغب في الرسم أيقونة الخامس محل تصوير، جيد أنك علمت، أيقوناتكما هو الحال على سطح المكتب أو الرموز المفضلة... يجب وضع ملفين ICOFormat.8bi فيهما مجلد ملفالتنسيقات، وبعد ذلك نبدأ محل تصويرونرى أنه يمكنك بالفعل حفظ المستند...

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

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

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

خلق أيقونات الخامس محل تصوير (ico)
خلق أيقونات الخامس محل تصوير (ico). تفاصيل. الفئة: قليلا محل تصوير. تاريخ النشر: 18 أبريل 2012. أيقونة الخامس محل تصويريتم إنشاؤه تمامًا مثل أي ملف آخر. ولكن في حزمة التثبيت محل تصويرلا البرنامج المساعد المطلوبللحفظ بالتنسيق ico.

هيا نرسم أيقونة الخامس محل تصوير
« محل تصوير-سيد" - الأكبر شبكة اجتماعيةبواسطة أدوبي محل تصويرفي الفضاء الناطق باللغة الروسية أيقوناتصغيرة، يمكن أن تكون صعبة للغاية يخلق. في درس اليوم سنوضح، كيف يخلق أيقونةالمجلدات باستخدام أشكال مختلفةو ردود الفعل...

كيفية القوة محل تصوير يفعلالصورة في الشكل عرض أولي للعملة?
ترجمة الصور، يفعل أيقونة ico، تنزيل البرنامج المساعد icoل محل تصوير. كل شيء هنا! لذلك، من أجل يفعل أيقونة الخامسشكل icoمن صورة عادية بتنسيق .jpg، .png، سنحتاج إلى استخدامها محل تصوير.

خلق أيقونات [.ico] باستخدام برنامج الفوتوشوب. عرض أولي للعملة(شبابيك أيقونة) - تنسيق تخزين الملفات أيقونات الخامس مايكروسوفت ويندوز. شكل عرض أولي للعملةيشبه تنسيق CUR (مؤشرات Windows) المخصص لتخزين المؤشرات." class="title"> كيف يخلق أيقونة [ico] الخامس محل تصوير|| كيف يخلقان أيقونة...
تاريخ النشر:2017-04-28 المدة: 04:10 خلق أيقونات [.ico] باستخدام برنامج الفوتوشوب. عرض أولي للعملة(شبابيك أيقونة) - تنسيق تخزين الملفات أيقونات الخامسمايكروسوفت ويندوز. شكل عرض أولي للعملةيشبه تنسيق CUR (مؤشرات Windows) المصمم لتخزين المؤشرات.