Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Designing
Design

كيفية إنشاء موقع ويب ترويجي في Adobe Illustrator

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Infographic Design.
Introduction: Vectortuts+ Session on Infographic Design
How to Create Outstanding Modern Infographics

Arabic (العربية/عربي) translation by Abdul Mutholib (you can also view the original English article)

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

كتاب أولي في Infographics

المعلومات والرسوم البيانية أو infographics تمثيلات مرئية رسومية من المعلومات أو البيانات أو المعارف. هذه الرسومات تقديم المعلومات المعقدة بسرعة وبوضوح، مثل علامات وخرائط، والصحافة، والكتابة التقنية والتعليم. مع رسم معلومات، علماء الكمبيوتر وعلماء الرياضيات والإحصائيين تطوير والتواصل المفاهيم باستخدام رمز واحد لمعالجة المعلومات (Wiki).

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

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

الخطوة 1 - العمل مع مصادر البيانات

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

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

هذه هي المصادر سوف تستخدم في هذا المشروع.


الخطوة 2

بعد جمع البيانات ، قد تحتاج إلى معالجتها. . على سبيل المثال ، يتم تقديم المعلومات في القيم الرقمية ، وتريد تقديمها فقط في شكل نسبة مئوية. يمكنك استخدام جدول بيانات مثل Microsoft Excel لمعالجة البيانات

هذه التطبيقات تسمح لك باستخدام الصيغ للعمليات الحسابية والعملية كمية كبيرة من البيانات.

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

الخطوة 3--التصميم العام

بعد بعض التفكير قررت تقديم infographics موقع على شبكة الإنترنت في شكل مستند متعدد الصفحات. . تتيح لك الإصدارات الأخيرة من Adobe Illustrator إنشاء هذا النوع من المستندات. قم بتشغيل التطبيق وقم بتعيين عدد اللوحات الفنية وأحجامها في نافذة الحوار New Document.

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

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


الخطوة 4

سوف نعمل الآن على تصميم تصميم أول لوح رسم لدينا.  خذ أداة المستطيل (M) وقم بإنشاء مستطيل بتعبئة زرقاء. يتم تعيين المستطيل بحجم لوح الرسم.

نسخ ولصق المستطيل في الأمام (Command + C؛ Command + F). لنقم بإنشاء شبكة متدرجة بسيطة باستخدام أداة الشبكة (U) ، ثم تحديد عقد هذه الشبكة بمساعدة أداة التحديد المباشر (A) وتلوينها في ظلال مختلفة من اللون الرمادي.  العقدة المركزية بيضاء ، وكلما ابتعدنا عن المركز ، كلما أصبحت ظلال اللون الرمادي أكثر قتامة.

حدد الآن شبكة التدرج بالكامل وقم بتطبيقها على وضع المزج المتعدد في لوحة Transparency.


الخطوة 5

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

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


الخطوة 6

باستخدام أداة المستطيل (م) إنشاء مستطيل كما هو مبين أدناه:

قم بتحديد الشكل البيضاوي والمستطيل، ثم انتقل إلى كائن > قناع قطع > جعل، أو استخدام اختصارات الأوامر + 7.

حدد مجموعة المحققة وانتقل إلى كائن > تحويل > تعكس..., ثم انقر فوق الزر "نسخ" في إطار الحوار.

مكان المجموعة الناتجة عن ذلك في الجزء العلوي من لوح الرسم.


الخطوة 7

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

مع المساعدة من "أداة التحديد المباشر" تحديد زوايا المستطيل السفلي ونقلها مباشرة.


الخطوة 8

شغل الشريط مع تدرج خطي الذي يتألف من ظلال مختلفة من اللون الرمادي الداكن.

الآن سوف نقوم بإنشاء ظل من الشريط. نسخ شكله ولصق مرة أخرى (Command + C؛ الأوامر + B). تعبئة الشكل الجديد بلون رمادي وتحريكه قليلاً إلى اليمين وإلى الأسفل. تطبيق طريقة "تراكب مزج" الظل. نقل الزوايا العلوية لشكل الظل بحيث أنها تقع على حافة لوح الرسم.

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


الخطوة 9

منذ المستند يتكون من عدة صفحات، أنه سيكون من المناسب لإنشاء تنقل بين الصفحات. الشروع في إنشاء الحدود الفاصلة للصفحات. باستخدام أداة المستطيل (م) إنشاء 25 مربعا قبل 25 px مع تعبئة متدرجة خطي، الذي يتكون من اثنين من ظلال من اللون الأزرق.

يبقى المستطيل المحدد، انتقل إلى تأثير > اسلب > مجموعة شعاع الزوايا و "زوايا مستديرة"....


الخطوة 10

إضافة تعبئة جديدة للكائن في لوحة المظهر. تغيير لون منزلق التدرج اللوني للتعبئة أسفل إلى أخف ظل الأزرق.

الحفاظ على التعبئة أسفل المحدد، انتقل إلى تأثير > تشوه & تحويل.. وقم بتعيين قيمة الإزاحة الرأسية.


الخطوة 11

إضافة تعبئة أكثر واحد للوحة المظهر ووضعه أسفل أخرى تعبئات واستبدالها اللون أزرق داكن.

إبقاء هذه التعبئة المحدد، انتقل إلى تأثير > تشوه & تحويل.. وقم بتعيين قيمة الإزاحة الأفقية والعمودية.

انتقل الآن إلى تأثير > طمس > "التمويه الضبابي".. وتعيين نصف قطر في إطار الحوار.


الخطوة 12

مكرر ثلاث مرات على الزر الذي تم إنشاؤه.

تأخذ أداة نوع (T)، وإنشاء الأرقام على الأزرار.

نسخ الأرقام ولصقها مرة أخرى. ملئها بلون أزرق داكن ونقلها 1 px لأسفل.


الخطوة 13

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


الخطوة 14

إنشاء مستطيل أسود في الجزء السفلي من لوح الرسم. مع المساعدة من أداة نوع (T) بإنشاء النص يشير إلى مصدر المعلومات والتأليف.

تجميع كافة العناصر التي تم إنشاؤها، نسخة ولصقه إلى بقية صفحات وثيقتنا (Command + C؛ Command + V).

ينبغي أن تختلف الصفحات فقط في مظهر الزر النشط في الحدود الفاصلة للصفحات. يمكنك بسرعة تغيير مظهر الزر مع المساعدة من "أداة الشافطة" (ط) مع الإعدادات الموضحة في الصورة أدناه.

الخطوة 15-تصور البيانات

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


الخطوة 16

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


الخطوة 17

الآن مناسبة في البلدان التي تتوافق مع أكبر عدد من الزوار مع الدوائر مليئة بتدرج شعاعي. التدرج ويتألف من ثلاثة ألوان: أبيض وأزرق وأسود، مع المنزلق الأسود تعيين الساعة 0% عتامة.

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


الخطوة 18

ويقع مصدر المحتوى، الذي لي، في أوكرانيا. لذا وضع علامة على مكان الموقع الخاص بي مع "علامة الخريطة".

توصيل أوكرانيا مع غيرها من مصادر حركة المرور مع مساعدة المقاطع المنحنية منقط، التي يجب أن يتم إنشاؤها باستخدام ℗ "أداة القلم".

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


الخطوة 19

الآن سوف ننتقل إلى الصفحة الثانية. ونحن سوف يكون تصور المعلومات على هذه الصفحة باستخدام أدوات Adobe Illustrator. سوف نقدم معلومات حول الفئات العمرية للزائرين في شكل "رسم بياني نسيجي". تأخذ "أداة الرسم البياني رادار" وإنشاء تحديد مستطيل التحديد.

ونتيجة لهذه الإجراءات يتم إنشاء الرسم بياني الأولية ويفتح نافذة "بيانات الرسم البياني" حيث أننا سوف يكون القفل في البيانات.

حدد الخلايا والمفتاح في تسميات الفئات، وتسميات البيانات في مربع النص إدخال.

انقر على الزر "تطبيق" في نافذة "بيانات الرسم البياني"، وكنتيجة لذلك نحصل على "رسم بياني نسيجي".


الخطوة 20

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

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

الآن وضع الرسم البياني على الصفحة واختر ألوان الكائنات التي تطابق التصميم العام للمشروع.


خطوة 21

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

مبادئ العمل مع هذه الصكوك لا تختلف عن تلك التي تعمل باستخدام "أداة الرسم البياني رادار". لمزيد من المعلومات حول العمل مع الرسومات البيانية في Adobe Illustrator بزيارة الرابط التالي.


خطوة 22

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

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

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

الخطوة 23--إنقاذ وتحرير المشروع

نحن ذاهبون لإنقاذ مشروعنا في تنسيق PDF، بحيث يكون من السهل توزيعها عند الحاجة. للقيام بهذا، انتقل إلى الملف > حفظ as... وحدد الخيارات المناسبة في windows فتح الحوار.

حفظ الملف بتنسيق PDF يعطينا عددا من المزايا. الأول في قائمة بعض منها فقط:

  1. وسوف يتمكن المستخدمون من عرض المشروع الخاص بك دون Adobe Illustrator.
  2. ليس لديك لاستخدام الأمر إنشاء الخطوط العريضة للنص. سوف يرى المستخدم النص كما تراها، حتى إذا لم يتم تثبيت الخطوط التي استخدمت في هذا المشروع. هذا يسمح لك للاحتفاظ بنص قابل للتحرير.
  3. يمكنك إدراج الارتباطات التشعبية في مستند وخلق ملاحة داخلية بين الصفحات.
  4. تكبير صورة العرض لن يؤثر على جودته. وسوف تظل الرسوم البيانية حادة وواضحة عند التكبير في Adobe Illustrator، منذ ذلك الحين أنها تستند إلى الكائنات المتجهة.

الخطوة 24

دعونا نلقي نظرة عن قرب على كيفية إدراج ارتباط تشعبي في المستند وإنشاء ملاحة داخلية في مجال تكنولوجيا المعلومات. لتحرير ملف PDF، اقترح عليك استخدام Adobe Acrobat Pro. بذلك، افتح الملف في هذا التطبيق، ثم فتح علامة التبويب المحتوى وانقر فوق زر الارتباط.

الآن قم بإنشاء مستطيل تحديد فوق الكائن الذي تريد الارتباط التشعبي لتحديد موقع.

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

قم بلصق الارتباط، ثم انقر فوق الزر موافق.


خطوة 25

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

الآن انقر نقراً مزدوجاً داخل المربع المحيط للزر. ثم في إطار الحوار فتح انتقل إلى علامة التبويب إجراءات.

اختر الإجراء، انقر فوق الزر تحرير وقم بإدخال رقم الصفحة المطلوبة.

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


معاينة الصورة النهائية

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.