تصميم موقع المعجبين خطوة بخطوة

كان هذا البوست ينضج ويتحضّر منذ وقت طويل. في الأصل، كان من المفترض أن يُنشر كاستمرار لسلسلة المقالات "إنشاء موقع معجب" (واحد و اثنان). ماذا تفعل هذه المقالة في مدونة Fable 3 إذن؟ الجواب بسيط: في حالة التصميم، من الصعب شرح أي شيء بدون مثال محدد. لا يوجد تصميم كروي في الفراغ. لذا، عندما تقررنا قبل فترة قصيرة إعادة إطلاق أحد مواقعنا المخصصة لسلسلة ألعاب Fable، قررت أن هذا هو المثال الذي سأستخدمه لـ"مشاركة الأسرار".

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

التحضير

في حالتنا، ستكون اللوحة، كما يمكنك أن تخمّن، هي Photoshop CS4، و"القماش" هو ملفنا الجديد الفارغ حتى الآن. بخلاف "التلاعب بالصور"، هناك برامج أخرى مثل Gimp. البعض يُدير العمل في Corel Draw. ولكن حتى الآن، لم يخترع البشرية برنامجًا أفضل للتصميم على الويب من الفوتوشوب. هذه هي الأداة الأساسية لمصمم الويب. يمكن استخدام Corel Draw أو Adobe Illustrator لإنشاء عناصر معينة من تصميمك، لكن "تجميع" المخطط يكون أسهل في الفوتوشوب.

تحدثنا عن "اللوحة"، والآن حان وقت القماش. هنا يجب أن نتذكر دقة الشاشة. قبل خمس سنوات، كانت دقة 1024x768 هي السائدة في كل مكان، و1280x960 كانت تبدأ بالتوجه نحو عقل البشر. قبل بضع سنوات، كانت 1680x1050 و1600x1200 تُعتبر دقة عالية. ولكن اليوم أصبحت الشاشات بدقة Full HD هي المعيار، لذا يجب أن نرى دقة تصل إلى 1920x1080. ومع ذلك، لا تزال 1024x768 تتباطأ في التوجه إلى التقاعد، لذا فهي حديتنا الدنيا. في الواقع، العرض هو الأهم لأنه من المحتمل أن يكون موقعنا طويلًا مثل 90% من المواقع على الشبكة.

كان من الشائع سابقًا إنشاء مواقع "تمتد". أي، تتكون العناصر المختلفة من عناصر متكررة، مما يجعل الموقع يمتد في العرض بناءً على دقة المستخدم. ولكن مع وصول Full HD، أصبحت هذه الطريقة غير جميلة. العين البشرية مُهيأة بطريقة تجعل المعلومات المستقرة على بعد ذراع تُستقبل بشكل جيد على عرض يعادل تقريبًا حجم ورقة A4. كل ما هو أوسع هو خارج التركيز. لذا، يُعتبر من الشائع مؤخرًا جعل الجزء المحتوي ضيقًا، والمساحة المتبقية على اليمين واليسار تُملأ بزينة خلفية. في هذه الحالة، سيظل الأغنام ممتلئًا، والنوافذ سليمة :) لذا، سيكون الجزء المحتوي لدينا مساحته 1000 بكسل (لا تنسَ أن هناك شريط تمرير على اليمين يأخذ هذه الـ 24 بكسل من 1024). وبالتالي، ستكون مساحتنا تحت "الحقول" بالجماليات الخلفية هي (1920-1000)/2=460 بكسل على اليسار واليمين. لتجنب الخروج المفاجئ عن هذه المساحة، أستخدم الإرشادات. في وضع الخطوط المقاسة، فقط أضع المؤشر وأسحب الإرشادات إلى الأماكن المطلوبة. يمكننا أيضًا تحديد مركز قماشنا على الفور. لقد حددت تقريبًا وفقًا للارتفاع المكان الذي أخصصه لرأس الموقع، وسيتحرك في المستقبل، لكنني وضعت "خطة". كل شيء، انتهت التحضيرات الأولية. دعونا نذهب إلى التحضيرات.

التحضير الأولي انتهى

نستقي الإلهام

هذه المرحلة هي الأسهل والأصعب في نفس الوقت. عليك جمع المادة التي سنستخدمها لنظام التصميم الخاص بنا. إذا كنت رسام محترف، يمكنك بالطبع رسم كل العناصر اللازمة بنفسك أو تكليف فريقك بذلك... من ناحية أخرى، إذا، ماذا تفعل هنا في هذه المقالة؟ :) هذه مقالة للمبتدئين. سنحتاج إلى عناصر فنية مواضيعية وعناصر للأبعاد الخاصة بنا، أو على الأقل ما يمكننا أن نصنعه من تلك العناصر. من المرجح أنه في المرة الأولى لن تتمكن من جمع كل ما تحتاجه لعملك، مما يعني أنك ستعود للبحث عن الرسوم والإلهام أكثر من مرة. عادة ما أبدأ البحث من الموقع الرسمي، ثم أتحول إلى مواقع المعجبين الكبرى إذا كان هناك مثل هذه. بعد ذلك، أتمم البحث عن الصور باستخدام Google وYandex. وأستخدم كلا نظامي البحث لأن النتائج تختلف بشكل كبير. حيث يفشل أحدهما، سيجد الآخر الكثير من المواد. إنه جيد إذا كان لديك الكثير من العناصر الفنية، ولديك لقطات كبيرة من واجهة اللعبة، وينشر المطور الكثير من الخلفيات... لكن في كثير من الأحيان، سيظل هناك شيء واحد أو آخر ينقصك.

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

هذه الإطار في النهاية تم تفكيكه إلى العديد من العناصر المكونة للواجهة


أول عمل كبير تم العثور عليه من الجزء الثالث

وهذه الصورة الثانية. لم أتمكن من العثور على أي شيء آخر في النمط المطلوب

هذه الصورة استخدمت كخلفية. ليست مثالية، لكنها كانت الأفضل الموجودة.

العنصر الفني للجزء الثاني كان مفيدًا في نهاية العمل

كيف يمكن أن نغفل عن الشعار؟

نبدأ العمل

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

ونصيحة أخرى، في الفوتوشوب، يتم الاحتفاظ بجميع العناصر الخاصة بك على طبقات فردية. لا تتردد في منحها أسماء ذات معنى على الفور، كما يمكن تجميع الطبقات لعناصر معينة باستخدام الأمر ctrl+b. عندما يتجاوز عدد الطبقات في ملفك الـ 100 طبقة، يصبح من الصعب فهم الأمر بدون تسميات وتجميع.

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

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

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

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

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

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

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

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

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

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

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

وها هي لحظة الحقيقة! بعد العودة خطوة إلى الوراء، بما أنني واكبت عناصرنا، وصلت إلى تصميم مقترح يبدو قريبًا جدًا من النهائي. جميع العناصر الأساسية مجمّعة وفي أماكنها: القائمة الرئيسية، الكتل الجانبية، المحتوى، الرأس والتذييل. إذا نظرت عن كثب، يمكنك أن تلاحظ أن بعض العناصر من الإصدارات السابقت كانت مفيدة. تم أخذ تنسيق النص من موقع عن Dragon Age، فقط لتقدير مكان النص. تم أخذ Palatino Linotype كخط أساسي. وهو خط جميل قياسي، وهذا أمر مهم للغاية. في هذه الحالة، سيظهر موقعك بلا مشاكل لجميع مستخدمي Windows. توجد بالطبع طرق لاستخدام خطوط خاصة سيتحملها الموقع في ذاكرة المستخدم، ولكن هذا يؤدي إلى استهلاك بيانات إضافية ومشكلات تظهر في خطوط في متصفحات مختلفة. لا أوصي باختراق ذلك. في الإنترنت، هناك جدول رائع للخطوط القياسية في Windows. أستخدمه و أوصي به. أما في الرأس، يمكنك ومن الضروري استخدام خطوط زينة. كنت قد وجدت في هذه المرحلة خط رائع يسمى Algerius Caps. فرق محسوس مع ما كان موجودًا!

مرحلة شيقة جدًا، تُظهر بوضوح أنه حتى في التصميم القريب للانتهاء، دائمًا ما يوجد شيء لتحسينه. أولاً، بالتأكيد تركت القائمة السفلية و حولتها بشكل نهائي إلى قسم التذييل. هل تذكر، قلت إن القائمة الأفقية ستكون مفيدة؟ - لقد حصلت. تم تنظيف التصميم من العناصر التي لم تعد ضرورية، حتى لا تتسبب في فوضى تصميمنا. لكن الأهم من ذلك، وجدنا المكان النهائي للتاج في التصميم. وداعًا للسيف من الغمد! نأخذ واحدة من عناصرنا الفنية ونقص ذراع الشخصية بجوار السيف والتاج. كانت العملية لطلاء الشعار، الذي كان معلقًا فوق القفاز، دقيقة للغاية. هذه هي الحالة التي تتجاوز فيها النسبة 1000%. بالإضافة إلى ذلك، بدأت العمل على تصحيح اللون في الخلفية. أصبحت صفراء وخضراء للغاية. قمت بتخفيفها. عادةً ما أستخدم طبقة إضافية ممتلئة باللون المطلوب مع نمط مزج soft light (الضوء الناعم)، ولكن يمكنك تجربة أنواع مزج أخرى حسب الحاجة. في هذه الحالة، تم تعديل الصبغة باستخدام طبقة زرقاء.

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

الخطوة النهائية

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

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

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

www.Fable-game.ru

بعد الكلمة

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

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

*كاتب التصميم والنص هو أنا، Ksandr\_Warfire

هذه المادة أُعدت خصيصًا لـ GAMER.ru