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

في Photoshop لرسم تصميم موقع بسيط حتى يمكن للمبتدئين

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

القليل عن إنشاء المواقع

فك بعض المصطلحات.

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

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

ولكن هناك طرق أكثر بساطة. هناك خدمات وبرامج عبر الإنترنت تقوم تلقائيًا بتحويل .psd (تنسيق ملف Photoshop) إلى HTML و CSS. عليك فقط تجميع القالب بشكل صحيح.

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

معلومات عامة حول خدمات الشبكة مفيدة أيضًا. يمكن أن يتميز الموقع بالمعايير التالية:

• صفحة واحدة. جميع العناصر والمحتوى وجميع محتويات المورد في مكان واحد. في صفحة واحدة لعرض محتويات الخدمة ، لا تنقر على الروابط أو تفتح علامات تبويب جديدة. في الوقت نفسه ، يمكن أن يكون الموقع نفسه كبيرًا بشكل تعسفي. سوف يتناسب مع كتيب الإعلان الصغير ، ورواية ضخمة من 600 صفحة.
• كامل. وفقا لذلك ، ويشمل العديد من الصفحات. يمكن أن تكون هذه ، على سبيل المثال ، "الصفحة الرئيسية" ، "المنتدى" ، "سجل الزوار" ، "الإجابات على الأسئلة المتداولة" ، "جهات الاتصال". لكل منهم تحتاج إلى القيام تخطيط. تحتاج أيضًا إلى التنقل وخريطة الموقع: قسم منفصل مع روابط لجميع أجزاء الخدمة. بحيث يمكن للمستخدم العثور بسرعة على الإشارة المرجعية التي يحتاجها.
• "المطاط". يغير الحجم حسب دقة الشاشة. امتدت جنبا إلى جنب مع نافذة المتصفح. يجب أن نحسب مقدمًا شكل الموقع. إذا كان عرض كل شيء 1300 يتم عرضه بشكل طبيعي ، في جزء من 900 بكسل قد "يتجاوز" جزء من المقالة حدود الإطار ، فإن الصور لن تقف كما يجب ، وستغلق الرسوم المتحركة الفلاش نموذج الإدخال.
• الثابتة. نص الموقع لا يغير الحجم. الخيار الأسهل والأكثر عملية. لجعل الصفحة تبدو صلبة ، وعند توسيع النافذة لا توجد مساحة "فارغة" عند الحواف ، يمكنك إنشاء خلفية مطاطية.

تصميم

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

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

• قم بإنشاء مستند جديد (ملف - جديد). يتم تحديد الأبعاد مع حساب على الشاشات الصغيرة أو دقة منخفضة: 1024 × 720 بكسل. هذا هو عرض الجزء "المعلومات" ، وليس الصورة بأكملها. إذا كنت تريد صفحة 1100 بكسل ، فأنت بحاجة إلى إنشاء مستند بعرض 1300 بكسل. الطول ، في الواقع ، غير ثابت - يعتمد على مقدار المحتوى الذي تريد وضعه على المورد. هذه توصيات وليست قواعد. يمكنك بناء تخطيط كبير إذا كنت تريد.
• بدوره على الحاكم. اضغط على Ctrl + R أو انتقل إلى قائمة عرض - المساطر. هذا هو مقياس القياس. تظهر خارج الصورة. بدون ذلك ، سيتعين عليك تقدير الحجم والمسافة "بالعين" ، والتي لا تؤثر جيدًا على النتيجة النهائية. يمكنك تكوين هذه الوظيفة في قائمة "تحرير - إعدادات - وحدات القياس والحكام". من الأفضل تغيير السنتيمتر لكل بكسل للعمل مع معلمة واحدة ، وليس لحساب عدد النقاط في بوصة واحدة.
• يجب عليك أيضا تفعيل الشبكة. عرض - عرض - شبكة أو Ctrl + E (يمكنك أيضًا إيقاف تشغيله). هذا هو نوع من التناظرية من جهاز كمبيوتر محمول في قفص. في Photoshop ، سيتم عرض الخطوط الرأسية والأفقية. لن تظهر على الرسم نفسه. لا يمكن رؤيتها إلا عند التحرير. هذه الوظيفة مطلوبة لترتيب عناصر القالب بالتساوي. شخص أكثر ملاءمة للعمل مع الشبكة ، شخص بدونها. من الأفضل تشغيله إذا كنت تنشئ موقعًا لأول مرة.
• لتكوينه ، انتقل إلى تحرير - إعدادات - أدلة ، شبكة ، وشظايا. هناك يمكنك اختيار حجم الخلايا ، وكذلك لون ونوع الخطوط (الصلبة ، المنقطة ، خارج النقاط).

مثال على تصميم الموقع الحديث

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

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

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

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

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

يمكنك جعل مورد جودة حتى من الكائنات الهندسية البسيطة.

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

كيفية تحويل التصميم إلى ملف html؟

لقد اكتشفت كيفية إنشاء موقع في Photoshop ، وقمت بتصميم التصميم الأول. ماذا تفعل بعد ذلك؟ بعد كل شيء ، لا يمكن تحميل فقط إلى الاستضافة.

يمكن إعطاءها إلى المبرمج الذي سيقوم بإنشاء قالب html عالي الجودة. ولكن هناك خيار آخر. استخدم الخدمات لتحويل ملف PSD إلى HTML و CSS.

• Psd2Html المحول. الخدمة المدفوعة عبر الإنترنت. قم بتحويل تنسيق Photoshop بسرعة إلى قالب صفحة ويب. من خلال هذا المورد ، حتى من خلال تخطيط منخفض الجودة ، يمكنك إنشاء موقع لائق.
• HTML الباندا.
• PSDCenter
• 40 دولار الترميز.

الصانعين

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

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