إعداد توضيحات لويب
16 يونيو 2008 بواسطة chriscoyier · 3 التعليقات
التوضيح هو الاتجاه الجميلة في تصميم المواقع الإلكترونية. تناسبها المتوسط أيضا. الرسامون كبيرة رغم ذلك ، غالبا ما لا نفكر في الشبكة عندما تفعل ذلك الرسوم التوضيحية الخاصة بهم. نلقي نظرة على هذا لطيف للغاية التوضيح سيتي سكيب السماء / التل وجدت على shutterstock :
وأعتقد أن هذا التوضيح من شأنه أن يجعل وجود قاعدة كبيرة لتصميم مواقع الإنترنت ، ولكن من الواضح انها ليست مستعدة لهذه المهمة من خارج المربع. يتيح القيام ببعض التلاعب وإعداده على شبكة الإنترنت.
الحصول عليها في Photoshop
انه أمر رائع أن يتم التوضيح النواقل. هذا يعني أننا يمكن أن تجعل من أي حجم نحتاج إليها دون أي خسارة في الجودة. سيكون هدفنا جعل هذا المشهد الجلوس في مركز أعلى من المستعرض ، لذلك دعونا الحصول عليها في Photoshop عند الحد الاعلى مع من ناحية المحتوى الرئيسي لموقعنا. يقول 960px. جعل وثيقة Photoshop 960px جديدة واسعة واطول مما كان يجب أن يكون لائقا.
فتح التوضيح الخاص في Adobe Illustrator وحدد الكل. نسخ ولصق في مستند فوتوشوب الخاص. تأكد لصقه على هيئة كائن ذكي. هذا سوف يسمح لها الإبقاء على الطابع انها ناقلات ، مما يتيح لك الفاخرة من دون فقدان الجودة. قد يأتي على النحو صغيرة جدا. لا تقلق هناك مقياس فقط ليصل إلى تناسب المستند 960px واسعة.
تمديد الحواف
بيئات العرض ليست ثابتة نوافذ المتصفح مثل فوتوشوب والوثائق. نحن بحاجة إلى إعداد التوضيح جهدنا لتبدو جميلة عند نافذة المتصفح هو أوسع من قاعدتنا 960px. دعونا نمضي قدما وزيادة العرض من قماش وثيقتنا إلى 1280px حتى يكون لدينا بعض الغرف للعمل مع.
هدفنا هنا هو الحصول على حافة نهاية هذا التوضيح في شيء أن يتم تكرار أفقيا. فإن الشخص تقطيع هذه الوثيقة بحاجة الى شيء من هذا القبيل لجعل هذا العمل لتصميم الويب. في نهاية المطاف سوف تكون هذه الشريحة الخلفية للعنصر <BODY>من صفحة ويب ، مع التوضيح هدفنا الرئيسي يجلس على القمة.
سآخذ شظية صغيرة من الحافة اليمنى من هذا التوضيح و "تعويم" أنه حتى على طبقة جديدة خاصة انها (القيادة - J).
الآن يمكننا أن هذا التحويل الحر شريحة جديدة قليلا (قيادة - T) وتوسيعه أفقيا قبالة الجانبين من الوثيقة. لأنه تم إنشاء تدرجات لطيفة والرأسية ، وهذا التمديد يعمل بشكل جيد قبالة الجانب الأيمن. على الرغم من الجانب الأيمن ، تبدو الى حد مفاجئ جدا ، مع التلال ، ويجري قطع الطريق الأدغال وانقطع فجأة.
حجب الانتقالية
بدلا من أن يفعل أي شيء يتوهم جدا ، ومحاولة دمج هذه الطبقات اثنين معا ، دعونا يحجب هذا الانتقال قاسية من خلال وضع الكائن الأمامي مباشرة فوق أعلى. وهذا يمكن القيام به مع التوضيح قليلا من عمق اضافي على أية حال.
وهذا لا علبة ناقل لطيف.
حذف كل شيء ما عدا نفسه ، وعلبة لصقه في التوضيح على هيئة كائن ذكي مثلنا وضعت التوضيح الأصلي. وريسيزينج قليلا والتنسيب ونحن نملك العنصر المثالي لحجب التحول في الخلفيات.
منطقة المحتوى الرئيسي
التوضيح لدينا هو الذهاب الى جعل لضربة رأس جميلة والخلفية ، ولكن بالنسبة للمضمون الفعلي للموقع ، ونحن بحاجة إلى نوع من كتلة كبيرة من البيض. يتيح انخفاض مستطيل أبيض مستدير على قمة الحق مع قليلا من شبح الهبوط لتفجيره.
ملء القاع
مع الحافة الأفقية الآن تحجب بشكل جيد ، ويمكننا ملء اللون على بقية الجزء السفلي من نموذج بالحجم الطبيعي الموقع. عينة لون (باستخدام أداة الشافطة) من الطريقة بكسل معظم الجزء السفلي من التوضيح وملء ثم لدينا أكثر من أسفل إلى طبقة فارغة مع هذا اللون الجديد.
هذا المجال هو المحتوى الرئيسي سيكون الان نسيم لأي مصمم على شبكة الإنترنت لائق يصل إلى شريحة.
اللمسات النهائية
رمي لطيفة رسالة ترحيب قليلا في السماء ، ونحن نملك أنفسنا لطيفة على شبكة الإنترنت يتضح يبحث موكوب]. لأننا قد اتخذت بعناية رعاية كل من التوسعة الأفقية والعمودية التوسعة ، وهذا التوضيح الآن مثالية لتحويلها الى الترميز إنترنت حقيقية.
لا تنزعج على CSS - الخدع حيث سأكون تحويل هذا إلى صفحة ويب حقيقية في الأسابيع القليلة المقبلة.
لماذا استخدام Photoshop لهذه المهمة على الإطلاق؟
لماذا لا تستخدم فوتوشوب؟ فوتوشوب هو أداة جيدة لصور للويب ، وليس لناقلات مثل هذه الصورة ولكن واحدة جيدة لتخطيطات (فكرة البرنامج التعليمي).
شكرا لأجل الطرف! فوتوشوب هو السحر!