7 نصائح فوتوشوب لتصميم المواقع النظيفة والحديثة
تصميم الويب النظيف والأنيق والجميل غالبًا ما يكون موضوعًا شخصيًا. أنظر إلى المئات من المواقع كل أسبوع ، والعديد منها يبرز لي ، ولكن ليس كلهم فعالون بالضرورة.
غالبًا ما يغلى المصممون المفهوم إلى حد بعيد ، مما ينتج عنه تصميمًا نهائيًا لا يعدو كونه نصًا وشبكة. في حين أن هذه التصاميم البسيطة لها جاذبيتها الجمالية ، لا سيما عندما تقترن بالطباعة الممتازة ، فإنها تخاطر بعدم التقليل من الإشعار.
إذا وضعنا الآراء الشخصية جانباً ، فهناك سمات معينة لتصميم يسمح لها بأن تصنف بفخر بأنها نظيفة أو حديثة وتعزز قابليتها للاستخدام وإمكانية استخدامها على المستوى العالمي. البساطة ليست اتجاه تصميم ، بل هي سمة التصميم الجيد.
يمنحنا Photoshop مجموعة متنوعة من الأدوات لخلق العمق والاهتمام ، ويدعونا إلى دمج التفاصيل الدقيقة حيث سنترك مساحة فارغة. ما عليك سوى حفنة من هذه الأدوات لبث صفات التصميم الحديث في تخطيط. من خلال إتقانها ، يمكنك إنشاء تصميمات نظيفة تعبر عن الوظيفة بوضوح وفعالية.
1. الفضاء
تسمح المساحة البيضاء بالفصل المرئي لعناصر التصميم بدون استخدام المربعات أو الخطوط أو الرسومات الإضافية وربما تكون أهم جانب في التصميم الحديث. من الضروري عرض المحتوى والقراءة. عندما تستخدم بشكل صحيح ، فإن المساحة البيضاء تعطي التصميم الخاص بك شعورًا نظيفًا وأنيقًا.
تتوفر الأدلة والشبكات في Photoshop لمساعدتك على تحديد العناصر بدقة. تراكب الشبكة المستند بأكمله بينما يمكن تعيين الأدلة يدويًا. استخدم الإرشادات مبكرًا لتعيين الحدود غير المرئية والهوامش والحشو المستخدم لتحديد المساحة البيضاء.
قم بإنشاء دليل عن طريق الضغط على Ctrl + R (Win) أو Cmd + R (Mac) لتمكين المسطرة ، ثم انقر فوق المسطرة العلوية أو اليسرى لسحب التوجيهي إلى الموضع الذي تريده. إليك بعض الاختصارات الإضافية لمساعدتك في إدارة الأدلة أثناء العمل:
- لتحريك دليل: Ctrl (Win) أو Cmd (Mac) وانقر على الدليل
- إظهار / إخفاء الأدلة: اضغط على Ctrl +؛ (Win) أو Cmd + ؛ (ماك)
- إظهار / إخفاء الشبكة: Hit Ctrl + '(Win) أو Cmd +' (Mac)
قم بتمكين Smart Guides ضمن View> Show> Smart Guides . يظهر Smart Guides تلقائيًا عند رسم شكل ، أو محاذاة النص ، أو إنشاء تحديد أو تمرير ، وسوف يوفر لك عمل إعداد إرشادات لهذه العناصر مقدمًا.
محاذاة الكائنات باستخدام الأدلة والشبكات يجعل تصميمك أسهل في الهضم وسيمنح النتيجة الإجمالية مظهرًا أكثر تشددًا.
2. عمق
العمق الذي تم إنشاؤه بالضوء والظل يجعل عناصرك تبدو هشة وحقيقية. يمكن تطبيق تأثيرات الظل على أي كائن ، أو تحديد ، أو طبقة نص ، لكن الخدعة هي اختيار لون يطابق الخلفية والتخلي عن اللون الأسود الافتراضي.
ليس كل الظلال يجب أن تكون مظلمة. امزج تأثير الظل الداخلي مع الظل المسقط باللون الأبيض أو الفاتح لإنشاء إحساس غائر أو "letterpress" مع حقول النص أو النموذج.
3. التفاصيل
تلعب كل من أداة التدرج وتأثيرات طبقة التدرج دورًا كبيرًا في التصميم النظيف والحديث. تتوفر التدرجات في كل جانب من جوانب التصميم الحديث ، من الظلال والإبرازات إلى الخلفيات والأزرار.
للوصول إلى أداة التدرج ، اضغط على Shift + G. لإنشاء تدرج ، انقر فوق لوحة الرسم ، واسحب ، ثم حرر. يفضل استخدام هذه الأداة لمناطق كبيرة مثل الخلفيات أو الأضواء أو الظلال الشعاعية. عند العمل مع عناصر فردية مثل المقاطع أو الأزرار أو الرموز ، يكون تأثير طبقة التراكب المتدرج وسيلة أكثر فاعلية لإنشاء أنماط أو زخارف سطحية. يتم الوصول إلى هذه الأداة عن طريق النقر المزدوج فوق طبقة العنصر وتحديد خانة الاختيار "تراكب الانحدار".
استخدم هذا التأثير لإعطاء بعدًا خفيًا لأزرارك وأشرطة التنقل ، أو لتقليد نمط وملمس الورق أو المعادن.
4. التعريف
من خلال الإفراط في تحديد الحواف والحدود ، فإنك تضمن أن عناصرك لها تباين مناسب.
سيحدد تأثير طبقة السكتة الدماغية عناصر مثل النص أو الأزرار حيث تحتاج إلى مخطط موزون بنفس القيمة على جميع الجوانب. سيؤدي استخدام هذا التأثير إلى إزاحة الظلال الداخلية وإسقاط لتوسيع خياراتك.
من المغري أن تتوجه إلى أداة القلم لرسم خطوط مستقيمة وقواعد أفقية ، ولكن إذا كنت تريد تطبيق تدرجات أو ظلال على الخط ، فمن الأسهل استخدام أداة صف واحد Marquee Tool ، والتي يتم دسها بحكمة خلف أداة مستطيلة Marquee Tool . استخدم أداة الصف الواحد على طبقة جديدة والظل المسقط الأبيض أو الفاتح اللون لإنشاء خطوط تمييز على طول حدود القسم أو فواصل حيث لا يمكنك تطبيق تأثير على العنصر نفسه.
5. الفائدة
النظيفة والحديثة لا تحتاج إلى أن تكون مملة ، بيضاء ، أو ضئيلة. الاستخدام الذكي للملمس والنقش سيجعل التصميم الخاص بك بارزًا ، أثناء التواصل مع الأسلوب والعلامة التجارية. استخدم تقنيات دقيقة مثل إضافة ضوضاء (Filter> Add Noise) أو طبقة طبقة Texture Overlay على مناطق الخلفية أو عناصر الواجهة للمساعدة على تمييزها. كلما ظهر عنصر أكثر وضوحًا وأصبح أكثر جاذبية للمشاهد.
6. منظور
المنظور هو الأسلوب الأكثر استخدامًا في تصميم الويب الحديث لمجرد أن الاتجاهات المستمرة تركز بشكل ثابت على التماثل والشبكات. من خلال تطبيق المنظور على الصور والعناصر في تصميمك ، يمكنك إدخال العمق والبعد والحداثة والاهتمام بتصميمك في خطوة واحدة سهلة.
يمكن إعطاء المنظور لأي شكل أو صورة عن طريق اختيار خيار "مسار التحويل الحر" في قائمة النقر بزر الماوس الأيمن والنقر فوق الزر "التفاف" الموجود في شريط خيارات الأداة.
يمكن أيضًا إنتاج وهم المنظور من خلال إنشاء أشكال أو إطارات غير متماثلة واستخدام التدرجات والظلال بشكل مناسب لوضع الأشياء بعيدًا عن بعضها.
7. سهولة القراءة
النوع القوي محبب بشكل جيد في مجتمع التصميم ، ومكون أقوى من التصميم النظيف. يمكن أن يحل محل الصور والرسومات التي قد تضفي تعقيدا على التصميم وتوضح جوهر التقنيات المذكورة أعلاه بطريقة بسيطة ومباشرة.
لإضافة مواد إلى نص ، قم بتحويل طبقة النص الخاصة بك إلى كائن ذكي أولاً عن طريق النقر بزر الماوس الأيمن على الطبقة واختيار "التحويل إلى كائن ذكي". أنت مقيد بتأثيرات الطبقة افتراضيًا ما لم يتم تحويل النص الخاص بك ، وهي ممارسة تريد تجنبها ، حتى عند تصميم الشاشة. يسمح لك التحويل إلى الكائنات الذكية بتطبيق الفلاتر والتقنيات الأخرى على النص مع الحفاظ على إمكانات التحرير في حال احتجت إلى تغيير ما يقوله النص لاحقًا.
تذكر أن لديك خيارات التتبع والتجانب المتاحة لك عند إعداد عناصر النص. حتى إذا كان نصك قد تم إعادة إنتاجه في CSS ، فيجب عليك تجربة تباعد الأسطر والحروف في وقت مبكر لتحسين رؤية كيف سيظهر محتواك في المساحة التي أعطيتها له. تذكر أيضًا استخدام النص "Crisp" أو "Sharp" للاحتفاظ بالتعريف والوضوح.
إن الطريقة التي تقدم بها المحتوى الخاص بك في التصميم النظيف أكثر أهمية من أي نمط آخر ، وذلك ببساطة لأن هناك أقل مما يحدث بصريًا لإلهاء العارض. من خلال استخدام النصائح أعلاه للنص الفضائي والكائنات بشكل مناسب ، أضف التعريف والفائدة ، وعيّن المحتوى بشكل منفصل عن الواجهة ، سيحقق تصميمك الفعالية المثلى.
ما رأيك في هذه النصائح وهل لديك آخرون تستخدمهم بانتظام؟ يرجى حصة أدناه ...