الخطوة الأولى: البدء

Google Web Designer عبارة عن بيئة تطوير مجانية لمشرفي المواقع توفر القدرة على إنشاء صفحات الويب ، بما في ذلك العناصر الفردية مثل الشعارات ، باستخدام CSS3 و HTML5. لاستخدام هذه الأداة ، أولاً وقبل كل شيء ، تحتاج إلى تنزيل ملف التثبيت من الموقع الرسمي وتثبيته.

قم بتنزيل Google Web Designer من الموقع الرسمي

تثبيت البرنامج

  1. انقر فوق الارتباط أعلاه للانتقال إلى الصفحة الرئيسية للبرنامج واضغط على الزر تنزيل Web Designer... يرجى ملاحظة أن البرنامج يدعم نظام التشغيل Windows 7 والإصدارات الأحدث فقط.
  2. انتقل إلى تنزيل Google Web Designer من الموقع الرسمي

  3. من خلال النافذة المنبثقة "حفظ" حدد موقعًا على جهاز الكمبيوتر الخاص بك واستخدم الزر المحدد في اللوحة السفلية.
  4. حفظ ملف Google Web Designer على جهاز الكمبيوتر الخاص بك

  5. انتقل إلى المجلد الذي يحتوي على الملف الذي حفظته للتو وانقر نقرًا مزدوجًا على زر الماوس الأيسر لفتحه. نتيجة لذلك ، يجب أن تفتح نافذة التثبيت.

    فتح ملف تثبيت Google Web Designer على جهاز الكمبيوتر الخاص بك

    يتم تنفيذ إجراء التثبيت في وضع تلقائي بالكامل ، حيث يتم حفظ جميع ملفات العمل في دليل مع برامج أخرى على قرص النظام.

  6. كيفية تثبيت Google Web Designer على جهاز الكمبيوتر الخاص بك

تفويض

  1. إذا كنت ترغب في حفظ المشاريع على الإنترنت أو بشكل عام إنشاء لافتة مخصصة لخدمات Google الداخلية ، فيجب عليك أيضًا إجراء التفويض. للقيام بذلك ، قم بتشغيل البرنامج باستخدام الرمز المقابل ، وأغلق نافذة الترحيب وانقر فوق الزر "ليأتي" على اللوحة العلوية.
  2. انتقل إلى تسجيل الدخول في Google Web Designer

  3. أدخل البيانات من حساب Google الخاص بك ، انقر فوق "بالإضافة إلى ذلك" وقم بالتأكيد إذا لزم الأمر. بعد ذلك ، ستتم إضافة الحساب على الفور دون الحاجة إلى أي إعدادات منفصلة.
  4. عملية تسجيل الدخول إلى Google Web Designer

تغيير الاعدادات

  1. بعد التعامل مع الإعداد ، من المستحسن الآن إجراء تغييرات على الإعدادات الأساسية للبرنامج من أجل تسهيل العمل في المستقبل. استخدم الشريط العلوي لتوسيع القائمة "تعديل" وحدد قسمًا "إعدادات" في نهاية القائمة.
  2. انتقل إلى قسم الإعدادات في Google Web Designer

  3. في علامة التبويب "الأساسي" يمكنك تغيير السلوك الأولي للبرنامج لفتح المشروعات بسرعة ، وتعيين مجلد لحفظ النماذج التي تم إنشاؤها ، وتعيين القيم الافتراضية لنوع الإعلان عند الإنشاء.
  4. تغيير الإعدادات الأساسية في Google Web Designer

  5. الصفحة التالية وضع عرض التخطيط يحتوي على خيارات لمظهر المحرر. من خلال تغيير الإعدادات المعروضة ، يمكنك ضبط الشبكة والتقاط العناصر لتحديد مواقع العناصر بدقة أكبر.
  6. إعدادات عرض التخطيط في Google Web Designer

  7. يحتوي Google Web Designer على محرر رموز بإعداداته الخاصة. لذلك ، في علامة التبويب "وضع عرض التعليمات البرمجية" يمكنك تعيين نمط مرئي ، وتعيين خيارات التنسيق ، وإضافة روابط مفاتيح إلى المهام.
  8. إعدادات عرض التعليمات البرمجية في Google Web Designer

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

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

  10. عرض الإعدادات المتقدمة في Google Web Designer

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

الخطوة 2: إنشاء لافتة

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

اقرأ أيضا: إنشاء لافتة في Adobe Photoshop

إعداد التخطيط

  1. لإنشاء مشروع جديد ، استخدم الرابط "إنشاء ملف" في نافذة البداية. لإعادة الفتح يمكنك استخدام العنصر "خلق" على القائمة "ملف".
  2. انتقل إلى إنشاء ملف جديد في Google Web Designer

  3. في الكتلة "إعلانات" تحديد "بانر" واملأ الحقل الرئيسي "اسم"، والتي بدونها لن يكون من الممكن الحفظ. يمكنك أيضًا تحديد موقع المشروع المعد.
  4. تغيير الإعدادات الأساسية لشعار جديد في Google Web Designer

  5. باستخدام القائمة المنسدلة "سياق الكلام" قم بتعيين أحد الخيارات بناءً على الاستخدام المستقبلي للشعار. يمكن تغيير نفس الدقة باستخدام القائمة "الأبعاد".

    تغيير حجم لافتة في Google Web Designer

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

    تعيين أحجام مخصصة للشعارات في Google Web Designer

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

  6. إعدادات لافتة إضافية في Google Web Designer

  7. يمكن توسيع خيارات التخصيص عن طريق اختيار علامة تبويب أخرى ، سواء أكان ذلك "توسيع" أو "بيني"... لن نفكر في هذه الخيارات ، لأن التخطيط القياسي سيكون كافيًا كمثال.

    مثال على شعار بديل في Google Web Designer

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

العمل مع الأدوات

  1. بعد إعداد التصميم ، تحتاج إلى التعرف على الأدوات. في اللوحة العلوية ، ينبغي إيلاء الاهتمام الرئيسي للقائمة "رأي"لتمكين العناصر المساعدة وتعطيلها.
  2. عرض قائمة العرض في Google Web Designer

  3. من خلال القائمة "نافذة او شباك" يمكنك تعطيل عنصر الواجهة هذا أو ذاك مؤقتًا. على سبيل المثال ، إذا كنت تريد إنشاء لافتة ثابتة ، "الجدول الزمني" سوف يعيق الطريق فقط ، وبالتالي فمن الأفضل إلغاء تحديد المربع المقابل.
  4. عرض قائمة النافذة في Google Web Designer

  5. يتم عرض أدوات المحرر الرئيسية في العمود الأيسر. لن نأخذ في الاعتبار كل خيار ، حيث لا يتم استخدام جميع العناصر أثناء الإنشاء ، لكننا نوصي بالتجربة بنفسك.
  6. عرض شريط الأدوات الرئيسي في Google Web Designer

  7. بجانب شريط الأدوات هو "مفتش الإعلانات" مع مساهمات متعددة. تستحق اهتماما خاصا "التطورات"مسؤول عن الإجراءات مع كائن الشعار هذا أو ذاك ، و "CSS"حيث يتم تعيين معلمات النمط.
  8. عرض أداة فحص الإعلانات في Google Web Designer

  9. على الجانب الأيمن من البرنامج ، توجد أيضًا مجموعة من الأدوات التي تتيح لك إدارة اللون والنص وهيكل الكائنات والخصائص والطبقات فقط. مثل مجموعة الوظائف الرئيسية ، من الأفضل دراسة النوافذ بنفسك أثناء إنشاء المشروع.
  10. عرض خصائص الكائن في Google Web Designer

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

ملء التصميم

  1. يبدأ إنشاء لافتة دائمًا بخلفية ، لذلك بعد إعداد التخطيط ، افتح علامة التبويب "الخصائص" وفي الكتلة "الصفحة" استخدم القسم الفرعي "ملء"... يمكن تعيين أي لون هنا ، بما في ذلك التدرج أو الخلفية الشفافة تمامًا.
  2. تعيين خصائص خلفية البانر في Google Web Designer

  3. علاوة على ذلك ، بالترتيب ، تحتاج إلى إضافة عناصر رسومية مُعدة مسبقًا. يمكنك القيام بذلك في علامة التبويب مكتبة الكائناتمن خلال النقر فوق الرمز «+» على اللوحة السفلية.
  4. الانتقال إلى إضافة الرسومات إلى Google Web Designer

  5. حدد ملفات الرسوم المطلوبة وانقر "افتح"... يمكن القيام بذلك دفعة واحدة لجميع الطبقات الضرورية ، أو بشكل منفصل ، تكرار الإجراءات المشار إليها.
  6. عملية إضافة العناصر الرسومية في Google Web Designer

  7. لإجراء التنسيب ، اضغط باستمرار على الصورة المطلوبة في علامة التبويب مكتبة الكائنات واسحب إلى منطقة المحرر الرئيسية.

    إضافة صور البانر في Google Web Designer

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

  8. وضع الصور على لافتة في Google Web Designer

  9. عن طريق تحديد ملف رسومي في مساحة العمل أو علامة التبويب "محرر منظم"، افتح "الخصائص"... هناك العديد من الاحتمالات هنا أكثر مما في حالة الخلفية ، على سبيل المثال ، إعدادات الحدود أو الحشو.
  10. تغيير خصائص صورة البانر في Google Web Designer

  11. إذا كان تصميم الشعار الخاص بك يتطلب نصًا ، فيمكنك إضافة العنصر المناسب باستخدام أداة Google Web Designer القياسية. انقر فوق الرمز "T" في اللوحة اليمنى ، انقر في نافذة المحرر الرئيسية وأدخل مجموعة الأحرف المطلوبة.

    إضافة نص إلى البانر في Google Web Designer

    للتحكم في النص ، حدد الطبقة في علامة التبويب "محرر منظم"، وسعت "نص" وضبط المعلمات المناسبة.

  12. تغيير خصائص نص البانر في Google Web Designer

إعداد الرسوم المتحركة

  1. في الكتلة "الجدول الزمني" يمكنك إضافة وتخصيص تأثيرات الرسوم المتحركة. أولا اضغط على الزر إضافة أيقونة مع الرمز «+».
  2. العمل مع المخطط الزمني في Google Web Designer

  3. انقر فوق الرمز ".5 ثانية" بين الإطارات وضبط الخيارات التي تريدها. على سبيل المثال ، يمكنك تغيير مدة وأسلوب الانتقال.
  4. تخصيص انتقالات الإطارات في Google Web Designer

  5. كل كتلة فردية على "الجدول الزمني" مستقل تمامًا عن الآخرين. لإنشاء رسوم متحركة ، قم بتغيير بعض العناصر كما تريد وتحقق من النتيجة باستخدام زر التشغيل.

    إنشاء صورة لافتة متحركة في Google Web Designer

    بعد الانتهاء من عملية التحرير ، استخدم الزر "لاعادتها"... سيؤدي هذا إلى إنشاء رسوم متحركة لا نهاية لها.

  6. نجح في إنشاء رسوم متحركة لافتة في Google Web Designer

مضيفا الأحداث

  1. بعد التعامل مع التخطيط ، تحتاج إلى إضافة أحداث انتقالية للعناصر الفردية أو الشعار بالكامل ككل. للقيام بذلك ، في العمود "مفتش الإعلانات" افتح علامة التبويب "التطورات" وانقر على الأيقونة «+» على اللوحة السفلية.
  2. انتقل إلى إنشاء حدث جديد في Google Web Designer

  3. في النافذة المفتوحة من القائمة "هدف" حدد كائنًا سيكون بمثابة ارتباط.
  4. استهداف حدث في Google Web Designer

  5. على الصفحة "حدث" وسعت "الفأر" واختر "انقر"... بناءً على متطلبات النتيجة ، يمكنك دمج إعدادات مختلفة.
  6. تحديد خصائص الحدث في Google Web Designer

  7. أبعد من القائمة "فعل" افتح إعلان Google وتعيين القيمة "انتقال"... سيسمح لك هذا الاختيار بجعل المستخدم ينتقل إلى صفحة معينة على الإنترنت تحتاجها.
  8. تحديد إجراء حدث في Google Web Designer

  9. مثل "مستلم" حدد خيار واحد مقدم "Gwd-ad".
  10. تحديد مستلم الحدث في Google Web Designer

  11. الخطوة الأخيرة في المجال “هوية. المؤشرات " قم بتعيين الارتباط إلى الاختصار واملأه "URL"بتحديد الصفحة المطلوبة. لحفظ الاستخدام "حسنا".
  12. إنهاء إعداد الحدث في Google Web Designer

العمل مع شفرة المصدر

  1. كما ذكرنا ، يحتوي Google Web Designer على محرر كود مضمن. يمكن تشغيله باستخدام الزر "الرمز" على الجانب الأيمن من اللوحة العلوية.
  2. انتقل إلى محرر الأكواد في Google Web Designer

  3. يمكنك إجراء تغييرات على بنية الشعارات ليس فقط باستخدام المحرر المرئي ، ولكن أيضًا العمل مباشرة مع الكود في ملف المشروع. يمكن أن يكون هذا مفيدًا جدًا عند محاذاة العديد من العناصر الصغيرة أو إضافة أحداث لا يوفرها البرنامج.
  4. عرض وتعديل التعليمات البرمجية في Google Web Designer

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

الخطوة 3: الاكتمال

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

معاينة

  1. في اللوحة العلوية ، انقر فوق "معاينة"لفتح قائمة إضافية. هنا يمكنك تحديد المتصفح الذي سيتم فتح الشعار به.
  2. انتقل إلى معاينة البانر في Google Web Designer

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

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

    أنشئ رابطًا مشتركًا لعرض شعار في Google Web Designer

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

  6. تم بنجاح إنشاء رابط مشترك لعرض الشعار في Google Web Designer

الحفظ والنشر

  1. لحفظ المشروع ، افتح أولاً قائمة الملفات واستخدم الخيار "حفظ"... بعد ذلك ، سيتم حفظ الملف الأصلي على الكمبيوتر ويمكن فتحه لاحقًا.
  2. عملية حفظ مشروع باستخدام لافتة في Google Web Designer

  3. يمكنك تحضير مشروع لوضعه في الموقع عن طريق فتح القائمة "ينشر" في الركن الأيمن العلوي من البرنامج واختيار أحد مواقع الحفظ.
  4. عملية نشر البانر في Google Web Designer

  5. غيّر المعلمات في نافذة النشر حسب رغبتك ، واترك مربعات الاختيار الضرورية فقط ، وانقر "ينشر"... التوفير بهذه الطريقة سريع بغض النظر عن حجم المشروع.

    الانتهاء من نشر البانر في Google Web Designer

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