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

تصميم عائلة من المواقع

by
Difficulty:IntermediateLength:LongLanguages:

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

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

يمكنك العثور على ملفات Photoshop PSD في دليل بعنوان "PSDs" جاء في ملف ZIP الذي قمت بتنزيله. قد ترغب في النظر فيها بشكل موجز قبل أن نبدأ.


أولا ، التصاميم النهائية

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

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

أن الشاشات أدناه:

  1. الصفحة الرئيسية لموضوع Creatif Portfolio
  2. الصفحة الرئيسية لموضوع مدونة كرياتيف
  3. صفحة محتوى عامة لأي منهما
  4. نظام ألوان بديل سننشئه في ورقة أنماط قابلة للتبديل - بحيث يمكنك تبديلها والحصول على إصدار داكن أو فاتح من أي من السمتين.









لوحة الألوان

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



الخطوة 1

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

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



الخطوة 2

وفيما يلي الإعدادات الخاصة "نمط الطبقة":



الخطوه 3

وأضاف لي التالية مستطيل مستدير الزوايا خلف النص. يمكنك إنشاء هذا مع أداة المستطيل تقريب (U). كما يمكنك أن ترى في الصورة أدناه أضفت تدرج باهتة إلى المربع كذلك. يمكنك القيام بذلك عن طريق النقر فوق CTRL طبقة المربع لتحديد كسل، الذهاب إلى تحديد > تعديل > العقد والتعاقد من جانب 1px وثم في طبقة جديدة رسم "التدرج الشعاعي" من إصدار أخف من اللون الداكن ويتلاشى للشفافية.

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



الخطوة 4

أصبحت الآن اللوحة التي أستخدمها هنا حوالي 1100 بكسل × ارتفاع 1400 بكسل. في الواقع ، كل المحتوى ضمن 1000 بكسل بحيث يمكن مشاهدته على شاشة 1024 × 768. أرغب في الحصول على لوحة قماشية أوسع حتى أتمكن من التخطيط لما يحدث عندما يكون للمشاهد دقة أكبر.

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

هناك اثنين من الأشياء أن نلاحظ:

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


الخطوة 5

ونضيف هنا بت الأول لدينا اللون تسليط الضوء. وخط 1px خفية حقاً على طول الجزء العلوي. لاحقًا عندما نضيف المزيد من العناصر ، سيظهر لون التمييز مرة أخرى في مناطق مختلفة ، وسنسحب هذه العناصر مع بعضها لتوحيدها في تصميم واحد أنيق المظهر. لأنه ليس هناك الكثير لهذا التصميم باستثناء عناصر وضع جيد واللون، من المهم جداً الحصول على الحق في التلوين.



الخطوة 6

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

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

من المهم أن تعرف عن بناء مواقع بحيث يمكنك تصميم لهم بطريقة تجنب المضاعفات في وقت لاحق إلى أسفل المسار. وأعتقد أن هذا يأتي معظمها من الخبرة والتعلم ما هو تصميم المقررات التي يمكن أن تجعل الحياة مزعجة في وقت لاحق. هنا فإنه يجعل الحياة أسهل بكثير أن يكون خلفية قابلة لتكرار بسهولة خارج منطقة 1000px للعرض.



الخطوة 7

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

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



الخطوة 8

والآن أود أن أضيف بعض المحتوى وهمية في هنا. لأن هذا النص يجب أن يكون نص HTML من المهم اختيار الخطوط الخاصة بك بعناية. هناك من شيء أكثر الاكتئاب من اختيار بعض الخطوط لطيفة وثم تذكر بعد ذلك أنها ليست الخطوط الافتراضية وذلك نتيجة لذلك التصميم الخاص بك سوف تبدو مختلفة تماما عن الكيفية التي يتصور. لقد استعملت Helvetica العنوان جريء و Arial للنص.

في Photoshop ، من المستحسن تعيين Anti-Aliasing على "Sharp" لتقليد كيفية ظهور النص في المستعرض. في الماضي كنت معتادًا على استخدام "بلا" ، ولكن في معظم الأيام ، تستخدم معظم أجهزة الكمبيوتر وجميع أجهزة Mac تلك الأشياء ClearType الأنيقة لجعل الخطوط تبدو سلسة.

مرة أخرى نلاحظ أن استخدام ارتباطات ضمني لدينا تسليط الضوء الأزرق، التقاط على الخط هيادلينج 1px أضفنا في وقت سابق.



الخطوة 9

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

حتى نتمكن من رسم مستطيل وإضافة بعض النص أكثر من اللازم. ثم استخدم أداة دودج (س) لتفتيح الجزء الأوسط، وإضافة "نمط طبقة" لإعطاء النص قليلاً من الظل. ثم اختر كلتا الطبقتين معًا ، فاضغطت على CTRL-T للتحويل والتدوير 45 '.



الخطوة 10

بعد وضعه على بلدي مربع أنا قص بعيداً الحواف كما هو مبين. الآن ستلاحظ أننا يمكن أن يكون وضعها حتى أنه يتماشى مع المربع، ولكن أعتقد أنه سيكون من الرائع جعل الأمر يبدو مثل هذا الشريط هو الالتفاف حول المربع، حيث أنها على وشك 4px إيقاف المربع.



الخطوة 11

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



الخطوة 12

ثم قمت بتكرار غلافي وأدرته 90 'ووضعته على الجانب الأيمن من الصندوق ، كما هو موضح. و فويلا ، عنصر التصميم لدينا!



الخطوة 13

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



الخطوة 14

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



الخطوة 15

الآن لأنني أصمم موضوع WordPress ، قررت أيضًا إنشاء إصدار من شعاري يمكن إنشاؤه باستخدام نص عادي. يمكنك مشاهدته أدناه وفي مكون HTML في هذا البرنامج التعليمي ، سننشئ مربع "الشعار" هذا.



الخطوة 16

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



الخطوة 17

والآن أود أن أشير إلى أن في الواقع أنا لم أكن تصميم تماما هذا التصميم بالطريقة أنا لقد المنصوص عليها في البرنامج التعليمي. في الواقع بدأ لي أقرب نموذج بالحجم الطبيعي أكثر مثل الصورة المبينة أدناه.

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

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



الخطوة 18

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



الاستنتاجات

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


المبنى إلى HTML

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

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.