Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

خلق تصميم موقع مظلمة ونظيفة في أدوبي فوتوشوب

by
Length:LongLanguages:

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

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

إعادة نشر البرنامج التعليمي

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


نبذة عن الكاتب

جوليان تشانيولو، المعروف أيضا ديفيلكانتبورن، مصمم ويب والرسم لحسابهم الخاص. كما أنه مؤلف في ThemeForest ، مع قوالب مثل 96Display أو Stereoline ، يمكنك أيضا العثور على المزيد من عمله في devilcantburn.com.

هذا التصميم مثال عظيم من الطراز الفريد جوليان: الظلام، بعد متطورة ما يكفي لاستخدامها لموقع الأعمال تجارية. يمكنك التحقق من المزيد من تصميم جوليان في الملف الشخصي ThemeForest ، DevilCantBurn.

دعونا دايف الحق في!


الخطوة 1: إعداد المستند

البدء بإنشاء مستند جديد في Photoshop هو 1200px x 1600px. تأكد من ضبط الدقة على 72 بكسل / إنش وتعيين الخلفية إلى الأبيض. نحن بحاجة إلى إلغاء تأمين طبقة الخلفية حتى نستطيع إضافة بعض أنماط طبقة، والحق فوق الخلفية وحدد "طبقة من الخلفية". يمكنك إعادة تسمية الطبقة ثم العودة إلى الخلفية...

املأ الخلفية باللون # 101010.

الآن قم بإنشاء الأدلة التالية (القائمة> عرض> دليل جديد ...):

  • 120px العمودي
  • 600px العمودي
  • 1080 بكسل عمودي

الآن لديك الحدود وسط منطقة الواجهة.


لخطوة 2: تنظيم مجموعاتك ...

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

في لوحة Layers ، انقر فوق الرمز لإنشاء مجلد جديد ، انقر نقراً مزدوجاً فوق اسم المجلد لتحرير الاسم. تفعل الشيء نفسه لكافة المجلدات.

Dark Web Design

المجلدات الطبقة الرئيسية التي نريد،:

  • رأس
  • المنزلق
  • الرئيسية
  • تذييل الصفحة
Dark Web Design

الخطوة 3: إنشاء الرأس

حدد مجلد "رأس" في لوحة الطبقات. ثم، حدد أداة المستطيل من "الأشكال ناقلات" منطقة شريط الأدوات:

Dark Web Design

ارسم مستطيلاً. إعادة تسميته مثل "أعلى شريط bg". Cmd + T (Mac) أو Ctrl + T وتعيين مستواهن لتكون 1200px واسعة قبل 10px القامة:

Dark Web Design

الآن دعونا نضيف بعض التصميم خفية؛ انقر نقراً مزدوجاً على الصورة الملونة المصغرة في لوحة الطبقات لتعيين اللون إلى #252525. انقر نقرًا مزدوجًا فوق الطبقة لتعيين طبقة FX مثل هذا:

Dark Web Design
سيتم إضافة هذا خفية "الظل الداخلي" تأثير حدود إلى الجزء السفلي من المستطيل هذا--وهذا مهم لفصلها عن باقي تصميم رأس.

الخطوة 4: إنشاء القائمة

أنشئ مجلدًا جديدًا باسم "القائمة العلوية" في مجموعة HEADER.

رسم مستطيل جديدة. إعادة تسميته مثل "قائمة أعلى bg". هل أبل + T أو Ctrl + T وتعيين مستواهن مثل "أعلى شريط حرس الحدود" ولكن مع ارتفاع 90px و 10px في محور Y. ولذلك سوف يكون هذا المستطيل فقط تحت "نار الأعلى حرس الحدود" طبقة في لوحة الطبقات.

Dark Web Design

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

Dark Web Design

أضع 4 "ممنوع" (ضرب مفتاح المسافة 4 x) بين كل عنصر وحجم الخط هو 18px.


الخطوة 5: وضع الشعار

أنشئ مجلدًا جديدًا باسم "Top Logo" في مجموعة HEADER على جميع المجموعات. حدده ثم انتقل إلى القائمة > الملفات > الاستيراد. لقد تضمنت عينة شعار المسمى "logo_zombie.psd" في المجلد موارد. اختره وضعه في 130 بكسل من اليسار و 5 بكسل من الجزء العلوي.

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


الخطوة 6: إنشاء شريط التمرير

حدد مجموعة المنزلق وإنشاء مستطيل كما في الخطوة رقم 3 وتعيين مستواهن مع ارتفاع 400px و 100px في محور Y.

قم بإعادة تسميته بشيء مثل "Gradient" ثم انقر مرتين على الصورة المصغرة الملونة في لوحة الطبقات لتعيين اللون على # 77b400 انقر نقراً مزدوجاً فوق الطبقة المحددة العملات الأجنبية-طبقة مثل هذا:

Dark Web Design

التدرج الأسود (# 00000) مع التعتيم بنسبة 100٪ إلى الأسود مع التعتيم عند 0

Dark Web Design

الآن، يجب عليك الحصول على تصميم مثل هذا:

Dark Web Design

تعد هذه الاستراتيجية لإضافة "تدرج ظل" بدلاً من استخدام الألوان الثابتة أمرًا مهمًا لأنها ستسمح لنا بسهولة بتغيير الألوان لاحقًا عن طريق ضبط لون المستطيل الأساسي.

بعد ذلك ، قم بإنشاء مجلد جديد باسم "slider_block". قم بإنشاء مستطيل (باستخدام أدوات Vector (U) كما هو الحال دائمًا) في هذه المجموعة المسماة "الشفافية".

Dark Web Design

وضعه مع تلك القيم: انقر نقراً مزدوجاً فوق الطبقة في لوحة الطبقات لفتح خيارات العملات الأجنبية-الطبقة. وتعيين من هذا القبيل:

Dark Web Design

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

Dark Web Design

الخطوة 7: إنشاء عناصر التحكم في شريط التمرير

قم بإنشاء x 100px 100px وثيقة جديدة. حدد Custom Vector Shape (U) من شريط الأدوات وانقر فوق اليمين على المستند لفتح قائمة أشكال المتجهات المخصصة. لإنشاء السهم، سأبدأ بشكل سهم افتراضي، ومن ثم نحن سوف تخصيصه:

Dark Web Design

قم بإنشاء الشكل مع حول عرض 50px. قم بتسمية الطبقة "Arrow slider". تحويل الشكل كما تحتاج.. باستخدام أداة السهم الأبيض (أ)، يمكنك يمكنك ضبط مسارات متجهة لجعل الخاصة بك السهم...

Dark Web Design

وضع العملات الأجنبية--طبقة على طبقة باستخدام هذه الإعدادات:

Dark Web Design

إزالة خلفية هذا المستند وحفظ المستند كـ: ArrowSlider.psd في المجلد PSD.

ضع هذا السهم في المجموعة "slider_block". للقيام بذلك، القائمة > ملف > الاستيراد...
اختيار في ArrowSlider.psd ووضعه في الموضع الذي تريده بجوار المنزلق.

Dark Web Design

قم بتكرار طبقة السهم (Ctrl + J أو Cmd + J) لإنشاء السهم لليسار وتحديد موضعه.
استخدم قائمة > تحرير > تحويل > استدارة على المحور الأفقي لتدوير السهم في الاتجاه السليم.


الخطوة 8: قم بتمييز شريط التمرير

إخفاء مجموعة "slider_block".
إنشاء طبقة جديدة فارغة، واستخدم أداة التحديد الدائرة (م) لإنشاء دائرة حول 200px.
تعبئة ذات اللون الأبيض.

Dark Web Design

قم بتحرير اختيارك ، ثم استخدم Filter> Gaussian Blur وقم بتعيينه على 50px.

Dark Web Design

تعيين طبقة الانصهار في "تراكب" ونقله في أعلى شريط التمرير.
تكرار هذه الطبقة 2 مرات ووضع الطبقات أسفل منطقة شريط التمرير الأيمن والأيسر...

Dark Web Design

الخطوة 9: قم بتحسين شريط التمرير

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

Dark Web Design

قم بتغيير لون الطبقة إلى أسود بدلاً من لون التدرج وقم بتعيين تعتيم خلفية الطبقة على 60٪.
انقر نقرًا مزدوجًا لفتح خيارات FX-layer وإنشاء ظل إسقاط وظل داخلي مثل:

Dark Web Design
Dark Web Design

انقل الطبقة إلى 1 بكسل لأسفل.
الآن أنت حصلت على خط مميزة لطيفة بين مربع التمرير وخلفية سوداء.

Dark Web Design

الخطوة 10: اصنع Slider Float!

افتح الملف background.jpg من مجلد الموارد (من الملفات التي تم تحميلها) واذهب إلى قائمة > تحرير > تعريف نمط... ثم قم بإغلاق الملف.
الآن قم بتحديد طبقة الخلفية وانقر فوقه نقراً مزدوجاً لفتح خيارات العملات الأجنبية--طبقة وانقر فوق علامة التبويب أنماط. هنا حدد الخلفية الجديدة الخاصة بك، أنشأته للتو.

الآن الحصول على اختيار طبقة الشفافية (Ctrl + النقر أو Cmd + النقر على الطبقة).
إنشاء طبقة جديدة باسم "الظل" ووضعها تحت طبقة "الشفافية".
ملء باللون الأسود وإضافة "التمويه الضبابي".
Menu> Filter> Blur> Gaussian Blur ... واجعله بطول 20 بكسل.
الآن تحويل لجعله مثل dropshadow...

Dark Web Design

مرة أخرى، استخدم قائمة > مرشحات > يطمس > "التمويه الضبابي" الآن مع طول 5px ولكن...
الآن تحويله مرة أخرى حجمه بحيث تتطابق مع طبقة الشفافية...

Dark Web Design

استمر في تحديد طبقة "الظل" واتخاذ اختيار طبقة "الشفافية" (Ctrl + click أو Cmd + وانقر على الطبقة في لوحة الطبقات).

الآن، عكس التحديد Ctrl + أنا أو Cmd + أنا وانقر على أيقونة لإنشاء قناع شفافية على طبقة "الظل". ظل الظل مخفيًا خلف منطقة الشفافية.

Dark Web Design

الخطوة 11: تعزيز الشعار

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

قم بإنشاء طبقة فارغة جديدة تحت طبقة الشعار وقم بتسمية "shadow logo" الحصول على اختيار طبقة الشعار وملء طبقة "شعار الظل" باللون الأسود.

إضافة "التمويه الضبابي" في 1، 5px طول.
تحويلها. Ctrl + T أو Cmd + T لتحويلها ، قم بتحريك نقطة المحول تمامًا إلى اليسار وتحريك اليمين
التعامل مع الجزء السفلي ل 20px...

Dark Web Design

الآن أنت حصلت على تأثير ظل عمق لطيفة. يمكنك أيضا إضافة أكثر من تأثير على الشعار نفسه إذا كنت تريد!


الخطوة 12: تحديد الأعمدة

الآن نحن ذاهبون لإضافة بعض أدلة إضافية لإنشاء الأعمدة 4 التي تم تصميم بقية المحتوى مع...

إنشاء الدلائل التالية (القائمة > رأي > دليل جديد...):

  • 355 بكسل عمودي
  • 375 بكسل عمودي
  • 590 بكسل عمودي
  • 610px العمودي
  • 825px العمودي
  • 845px العمودي

لدينا الآن 4 أعمدة من 215 بكسل لكل واحد و 20 بكسل لكل منهما.


الخطوة 13: شعار كتلة

استيراد geek_zombie.png من المجلد موارد ووضعه في منتصف العمود الأول.

إنشاء خط كبير من النص للشعار مع نص اختيارك. استخدمت الخط "Droid Serif" بحجم 30 بكسل وارتفاع الخط عند 42 نقطة. يمكنك ضبط الطباعة كما يحلو لك ولو;)

رسم مستطيل تحت الشعار مع 7px ارتفاع.

Dark Web Design

في المستطيل الأسود إنشاء خيارات العملات الأجنبية--طبقة مثل هذا:

Dark Web Design

لديك الآن شطبة لطيفة (الضغط عليه) شريط.

Dark Web Design

حدد الطبقات الثلاث (Zombie + Slogan + black bar) والقيام Ctrl + G أو Cmd + G لتجميعها. إعادة تسمية مجموعة "شعار". لاحظ كيف أننا باقون تنظم من خلال العملية برمتها!


الخطوة 14: أول كتلة العمود

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

تحديد منطقة النص في جميع أنحاء 128px العنوان ووضع بعض النص "حشو" الصغيرة داخله. أنا أستخدم 13pt Arial ، ولكن يمكنك استخدام ما تريد.

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

Dark Web Design

إنشاء منطقة لصورة باستخدام أداة "الشكل المتجهات" (U). 215 × 88 بكسل.
يمكنك تكرار ذلك ، وإعادة تسميته باسم "Tranparency_1col" وتمديده في الارتفاع للحصول على كتلة تبلغ 215 × 108 بكسل.
اضغط Ctrl + أو + Cmd، لتحريك الطبقة لأسفل في لوحة الطبقة.

حدد طبقة "Transparency" وقم بنسخ نمط FX-Layer لوضعه على الطبقة فقط المكررة ("Tranparency_1col").

الآن يمكنك وضع صورة لك فوق منطقة صور. انقر بزر الماوس الأيمن على الصورة وحدد "إنشاء قناع قطع".

Dark Web Design

الخطوة 15: إنشاء الأعمدة الأخرى

يمكنك الآن تكرار العمود الأول (مجموعة الطبقات) ، ثم نقله إلى العمود الثاني. تغيير المحتوى (نص/صورة) حسب الحاجة.

فعل نفس الشيء للأعمدة 3 و 4 ...

Dark Web Design

الخطوة 16: تذييل الصفحة

انتقل إلى القائمة> الصورة> حجم الرسم القماش وحرر حجم اللوحة مثل:

Dark Web Design

رسم مستطيل. إعادة تسمية مثل "تذييل BG". Cmd + T (Mac) أو Ctrl + T وتعيين مستواهن إلى:

Dark Web Design

انقر نقرًا مزدوجًا على الصورة المصغرة الملونة في لوحة الطبقات لتعيين اللون على # 101010. انقر نقراً مزدوجاً فوق الطبقة المحددة العملات الأجنبية-طبقة مثل هذا:

Dark Web Design

حدد ومضاعفة الطبقات "شريط الظلام" و "التدرج" من مجموعة المنزلق.

مجموعة الطبقات ووضعها تحت "تذييل حرس الحدود" في لوحة الطبقات.

انقلهم إلى أسفل المستند

تغيير حجمها لإنشاء النمط الذي تريده.
في المثال الخاص بي ، أنا جعلت طبقة التدرج 35px طولا و "شريط مظلم" طبقة 8px طويل ...

وضع الشعار في أسفل اليمين في 20px دليل الصحيح.

Dark Web Design

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

إنشاء خط حقوق التأليف والنشر في Arial ، 11pt ، اللون الأسود.

Dark Web Design

يمكنك تكرار "bg footer" وتغيير حجمه في الارتفاع بمقدار 10 بكسل.
حركه فقط فوق "bg footer". أن إنشاء تأثير المجسم مشطوف الحواف لطيفة لأسفل القائمة.

Dark Web Design

فعلت! إنشاء إصدارات مخصصة خاصة بك!

Dark Web Design
Dark Web Design
Dark Web Design

استنتاج

شكرا على يلي على طول! أمل أنك قادرة على استخدام بعض الحيل والتقنيات في هذا البرنامج التعليمي في بعض المشاريع الخاصة بك. إذا كنت تتذكر أي شيء ، آمل أن يكون البقاء منظمًا أمرًا حيويًا لإنشاء موقع جيد التصميم. يمكن استخدام نفس هذه الطبقة-المجموعات لإنشاء إطار HTML/CSS عند بدء الترميز. شكرا مرة أخرى!

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.