كيفية رسم قالب لموقع ويب

جدول المحتويات:

كيفية رسم قالب لموقع ويب
كيفية رسم قالب لموقع ويب

فيديو: كيفية رسم قالب لموقع ويب

فيديو: كيفية رسم قالب لموقع ويب
فيديو: كيفية تصميم قوالب template | تعلم تصميم المواقع الالكترونية من البداية الى النهاية #1 2024, شهر نوفمبر
Anonim

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

كيفية رسم قالب لموقع ويب
كيفية رسم قالب لموقع ويب

انه ضروري

برنامج أدوبي فوتوشوب

تعليمات

الخطوة 1

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

الخطوة 2

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

الخطوه 3

ابدأ Photoshop ، وأنشئ مشروعًا جديدًا بحجم 1200 × 1600 ، وقم بتعيين خلفية شفافة. قم بتشغيل أداة Ruler ، إذا لم تكن قيد التشغيل بالفعل ، فاضغط على مجموعة المفاتيح Ctrl + R. تمكين الالتقاط: عرض - التقاط.

الخطوة 4

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

الخطوة الخامسة

ابحث عن خلفية للقالب الخاص بك ، يجب أن يكون نمطًا صغيرًا متكررًا. افتحه في Photoshop ، حدد ، انسخ. ثم الصق القالب عدة مرات حسب حاجتك لملئه بالخلفية. يتم اللصق على النحو التالي: "تحرير" - "لصق" ، ثم اسحب منطقة الخلفية إلى الموقع المطلوب. من الأسرع إدراج صورة باستخدام الأمر Ctrl + V. أضف خلفية لرأس الموقع بنفس الطريقة. يمكنك استخدام تعبئة متدرجة مختلفة لإنشاء خلفية.

الخطوة 6

باستخدام أداة Pencil ، ارسم حدود القالب ، مع التركيز على الخطوط المرسومة بالفعل (أي فوقها). لقد تلقيت أساس أبسط قالب ، والآن تحتاج إلى استكماله بالتفاصيل الضرورية - أزرار التنقل ، وخطوط القوائم ، وعناصر التزيين المختلفة ، إلخ. لمزيد من المعلومات حول كيفية إنشاء الأزرار والعناصر الأخرى ، اقرأ المقالات المقابلة حول العمل باستخدام Adobe Photoshop.

الخطوة 7

تم إنشاء النموذج ، والآن تحتاج إلى تقطيعه إلى أجزاء لإدراجها في صفحة html. استخدم أداة القطع للقص. للعثور عليه ، انقر بزر الماوس الأيمن فوق أداة الإطار واختر Cutout من القائمة التي تفتح. يمكنك الآن تداخل القالب حسب الرغبة ، ثم حفظ: "ملف" - "حفظ للويب". في النافذة التي تفتح ، حدد نوع الملف: HTML & images ، وحدد اسم الملف: index.htm واحفظه. سيكون لديك ملف index.htm ومجلد صور به صور مقطعة.

موصى به: