كما نعلم جميعًا ، يعمل تخطيط الموقع على ترميز تخطيط التصميم ، ولجعلنا أكثر راحة نستخدم البرامج المختلفة للعمل مع المخططات. فوتوشوب؟ رسم؟ Zeplin؟ نعم ، هذه جميعها أدوات رائعة ، لكن اليوم سنتحدث عن منتج من الجيد فعلاً تصميم موقع عليه. انها حول الأفوكود.
بالانتقال إلى موقع Avocode على الويب ، يُعرض علينا فورًا إصدار فترة مجانية مدتها 14 يومًا ، ولكن نأخذ وقتك ، وسوف نوضح لك كيفية تسجيل خطة تعريفة رائعة لمدة 30 يومًا. أول الأشياء أولاً.
يمكنك العمل هنا على الموقع ، لكنني أوصي بتنزيل البرنامج على الكمبيوتر. نجد علامة التبويب
التنزيل ، حدد النظام ، التنزيل.
بعد فتح البرنامج ، يجب تسجيل الدخول ، لكننا لم نسجل بعد في النظام. كما ذكر أعلاه ، تحتاج إلى القيام بذلك بشكل مربح قدر الإمكان.
تسجيل الفترة التجريبية لمدة 30 يوما.
لذلك ، العودة إلى الموقع. قم بالتمرير لأسفل وابحث عن الرابط
Avocode vs. Zeplin وانقر عليه. Zeplin هو بديل ل Avocode.
نحن مهتمون بالجزء السفلي من الصفحة ، لذا نحن نبحث عن هذه المجموعة. تقول هنا أنه يمكنك الحصول على avacode مجانًا لمدة 30 يومًا عبر هذا الرابط ، ويسألوننا "ماذا ننتظر؟" وماذا حقا؟ بعد أن رفضت جميع الشكوك ، انقر فوق الزر واملأ النموذج.
وبعد ذلك ، سألمحك فورًا بأنه إذا لم يكن لديك وقت للاستمتاع بالبرنامج لمدة شهر ، فيمكن تكرار هذا الإجراء عن طريق تسجيل بريد إلكتروني آخر. من الواضح ، يمكنك تكرار هذه الإجراءات إلى ما لا نهاية). لكن شخصيا ، أنا أدفع ثمن avocode وأنصحك. من ناحية أخرى ، بينما كنت مبتدئًا ، يمكنك توفير المال. الأمر متروك لك.
نؤكد بريدنا الإلكتروني من خلال النقر على الرابط في الرسالة والانتقال إلى التطبيق. انتقل فورًا إلى القائمة وانقر على اسم الشهرة الخاص بك ، ثم في علامة التبويب "
الفوترة" ، نرى أن لدينا 30 يومًا من الكرة ، وحتى خطة الشركة الباهظة الثمن والمكلفة ، تبلغ تكلفتها 100 دولار شهريًا. نحن نفرح. الميزة الرئيسية لهذه التعريفة هي أنها مصممة لخمسة أشخاص ، أي أنه يمكنك دعوة أربعة متعطلين آخرين إلى فريقك. يمكنك القيام بذلك في علامة تبويب
الأعضاء . اقرأ المزيد عن التعريفات على موقع البرنامج.
بالمناسبة ، إذا قررت الدفع مقابل البرنامج ، فلا تنسَ تغيير خطة التعريفة على خطة أكثر بساطة. نذهب إلى
خطة تغيير الفوترة وهنا أرخص واحدة مناسبة تماما. بعد ذلك ، تحتاج إلى إضافة بطاقة ائتمان وطرح 168 لونًا أخضر سنويًا. لكن مرة أخرى ، لا تتعجل ، بعد فترة 30 يومًا ، عادةً ما تقدم Avocode تمديد التعرّف على دولار واحد عبر البريد الإلكتروني نفسه. على الأقل يعمل اليوم.
إذن ماذا نحصل على هذا المال؟ ولماذا أفوكود رائع جدا. حان الوقت لمعرفة ما يعرفه.
اعمل مع البرنامج
لنقم بإنشاء مشروع الاختبار الخاص بنا. انقر فوق
مشروع جديد .
لذلك ، واحدة من المزايا الرئيسية للأفوكود لمصمم التخطيط هي التنسيقات المدعومة دون أي ملحقات. وهذا ، للمرة الثانية ،
Photoshop (PSD) ،
Sketch ،
Adobe XD و
Illustrator . وكذلك التكامل الجزئي مع
Figma . حسنا ، ما ليس الجمع بين عالمي؟
إلى جانب حقيقة أن الملفات يمكن تحميلها مباشرة ، يمكن مزامنة avocode من خلال الإضافات في المحررين الرسوميين أنفسهم ، وكذلك باستخدام
صندوق الإسقاط . أنا معتاد على تحميل الملفات.
لذلك ، سنضيف أي تخطيط ، لذلك يمكنك إما سحب الملف إلى هذه المنطقة وتحديده على القرص. بعد التنزيل ، يمكننا فتح الملف والتحدث عن واجهة البرنامج ، لكنني سأبدأ بالإعدادات العامة. انقر لدينا
الصورة الرمزية - تفضيلات التطبيق.
بادئ ذي بدء ، سأنتقل إلى الجانب المظلم من Theme Dark power. بعد ذلك ، يمكنني تحديد المجلد الافتراضي لتصدير الصور ، بالإضافة إلى إيقاف تشغيل تحسين الصورة ، وإيقاف تشغيل التعرجات عند التكبير ، وتمكين الكتابة فوق الصورة التي تم تصديرها. وعدد من الإعدادات البسيطة التي لا أستخدمها. في الحقيقة ، أنا هنا أتحدث عن موضوع مظلم ، اترك كل شيء آخر كما هو.
واجهة البرنامج
للعمل مع التصميم ، نحتاج إلى علامة التبويب فحص. على اليسار ، نرى شيئًا مثل الطبقات الموجودة في Photoshop ، حيث يمكن إخفاؤها وعرضها بالنقر فوق العين. إلى اليسار نرى شريط أدوات وأنا أستخدم الاثنين - هذا هو المسطرة والشافطة. إليك السبب:
اليد - يسمح لنا بتحريك التصميم عن طريق الضغط على زر الماوس الأيمن. ولكن الخط يمكن أن تفعل الشيء نفسه مع شريط الفضاء فرضت.
السهم (تحديد التحديد) - يسمح لك بتحديد طبقات متعددة. ولكن الخط يمكن أن تفعل الشيء نفسه بالضبط.
يمكن لـ Knife (slice) تحديد منطقة عشوائية مع التصدير اللاحق للصورة ، لكن بطريقة ما لم أستخدمها مطلقًا.
أحيانًا ما
تكون القطارة ضرورية - فهي تنسخ رمز اللون في المنطقة المحددة.
وأخيرا ،
الحاكم . عند تحديد هذه الأداة ، يبدأ السحر.
على سبيل المثال ، أحتاج إلى معرفة حجم كائن ما ، وكذلك المسافة منه إلى عناصر أخرى.
للقيام بذلك ، أنا فقط انقر فوق الكائن ، وأرى أبعاده فورًا بالبكسل ، وعندما أقوم بالمرور فوق الكائنات المجاورة ، أرى على الفور مسافات مختلفة ، وهي ملائمة بشكل لا يصدق أثناء التخطيط.
إذا لم تظهر المسافات لسبب ما ، يمكننا قياسها يدويًا عن طريق الضغط على زر الماوس الأيسر وامتدادها بين الكائنات الضرورية. يتم عرض ارتفاع وعرض المنطقة المحددة على اليمين في نافذة المعلومات.
انتقل بسلاسة إلى الجانب الأيمن من البرنامج. أولاً ، انقر فوق المستوى العلوي لطبقاتنا ، في الواقع ، على اسم الملف. على اليمين سنرى:
صورة للتخطيط بأكمله ، وحجمه. القدرة على تحميل لقطة شاشة للتخطيط ، وهي ملائمة للمحفظة. معلومات عامة: ماذا وأين ومتى. فيما يلي قائمة بجميع الألوان المستخدمة في التخطيط ، وهو أمر مفيد ، ولكن الأكثر فائدة هو قائمة بجميع الخطوط المستخدمة في التخطيط.
عادة ما يتم توفير الخطوط من قبل المصمم جنبًا إلى جنب مع التصميم ، ولكن هذا ليس هو الحال دائمًا ، لذلك ستساعدنا هذه القائمة في العثور على الخطوط التي نحتاجها بمفردنا.
علاوة على ذلك ، بالنسبة للمستخدمين الأكثر تقدماً ، من الممكن تكوين متغيرات متنوعة لأنفسهم.
الشريط السفلي ، رغم صغر حجمه ، ليس أقل فائدة. هنا لديك حجم المخطط. يمكن أيضًا تغييرها عن طريق التحكم في عجلة الماوس وتدويرها. بعد ذلك ، لدينا أداة التحقق من التنسيق على Pixel Perfect ، أي بكسل بالبكسل. مع ذلك ، يمكننا فرض تخطيط شفاف على التخطيط والتحقق من الأحجام والمسافات البادئة. تحتوي الأداة على عدد من الإعدادات المفيدة ، مثل الشفافية وإيقاف تشغيل خلفية التخطيط.
النقطة الأخيرة هي أدلة. هنا يمكنك تمكين أدلة المصمم أو إضافة دليلك الخاص. بينهما ، أيضا ، يمكنك قياس المسافة.
لذلك ، تم فصل لوحة التصميم بالكامل ، والآن لنرى ما ستقدمه لنا اللوحة لكائن منفصل. انقر ، على سبيل المثال ، على الصورة. على اليمين نرى الكائن المحدد وحجمه وزرًا لتصدير الصورة.
انقر. هنا يمكننا ضبط اسم الملف ، المقياس ، اللاحقة وتنسيق PNG JPEG SVG و WEBP. يمكنك أدناه تحديد المجلد الذي سيتم حفظ الصورة فيه. يمكنك تحميل العديد من الصور في ملف واحد عن طريق تحديدها بالماوس أو بالنقر فوق الصور المرغوبة مع الضغط على مفتاح
التحول . يمكنك أيضًا النقر فوق الصورة باستخدام زر الماوس الأيسر وتحديد العنصر المطلوب.
الآن الجزء الممتع هو النص وعناصر التصميم الأخرى. على سبيل المثال ، انقر فوق النص. على اليمين في نافذة
الأنماط ، نرى قدس الأقداس - كل شفرة CSS النهائية لعنصرنا! يمكننا نسخ كل شيء ، ونسخ معلمة واحدة فقط من خلال النقر عليها ، وكذلك تكوين شكل كودنا ونوعه. ولنسخ نصنا ، ما عليك سوى النقر نقرًا مزدوجًا فوقه باستخدام الماوس.
يمكن لبرنامج avocode استبدال محررات الرسومات الأصلية بالكامل تقريبًا لكل تنسيق من التنسيقات. باستخدام هذا البرنامج ، يعد العمل مع التصميم أمرًا ممتعًا ويوفر الكثير من الوقت!
بناءً على إصدار
Avocode لمصمم التخطيط. كيفية استخدام Avocode 30 يومًا مجانًا ، من سلسلة "
البرامج والأدوات لتخطيط الموقع " ، على قناة YouTube "
Freelancer for Life ".