() translation by (you can also view the original English article)
في هذا البرنامج التعليمي سوف يكون استخدام Photoshop CS6 لتصميم بسيطة ونظيفة، والصفحة المقصودة لبدء تشغيل السفر خيالية. أثناء هذه العملية، سوف ننظر في إنشاء شبكات مخصصة مع المبادئ التوجيهية، تصفيف المحارف، واستخدام الكثير من المساحة البيضاء وتأليف محتوى موقعنا على شبكة الإنترنت بطريقة نظيفة جداً والمهنية. ستكون مستعدة لتسليم إلى مطور للترميز حتى الانتهاء من ملف PSD.
دروس الأصول
من أجل متابعة على طول كنت ستحتاج الأصول (مجاناً) التالية:
- صور المسافر الدراجة من أونسبلاش
- الخط Serif حزب العمال من "السنجاب الخط"
- الخط إلير من "السنجاب الخط"
- بلا فتح الخط من "السنجاب الخط"
- الصور الرمزية من المستخدم في جملة وجوه
الحصول على الوثيقة جاهزة
الخطوة 1
البدء بإنشاء مستند جديد (ملف > جديد...) باستخدام الإعدادات الموضحة أدناه.
الخطوة 2
دعونا تعيين بعض الأدلة لذلك لدينا تخطيط مساحة كافية وتبدو متوازنة. لا تستخدم دائماً شبكة، ولكن وضع بعض المبادئ التوجيهية سوف يكفل بكسل الكمال وستساعد على تحديد عرض موقعنا على شبكة الإنترنت. تقسم لوحة الرسم القماشية إلى نصفين رأسياً حيث يمكنك إنشاء تركيبة مركزة. انتقل إلى طريقة عرض > "دليل جديد".. ووضع بعض المبادئ التوجيهية. وعادة ما اخترت 1000px كعرض موقع وإضافة بعض المبادئ التوجيهية من الزوايا ذلك لديه مساحة للتنفس.
ملاحظة: استخدام المبادئ التوجيهية لهذا البرنامج التعليمي: الرأسي في 200px، 260px، 700px، 1140px، و 1200px.
تلميح: يمكنك أيضا استخدام المساعد فوتوشوب جويديجويدي لإجراء هذه العملية حتى أسرع.
الخطوة 3
نحن ذاهبون للحفاظ على وثيقتنا تنظيماً جيدا من البداية، لذلك دعونا إنشاء ثلاث مجموعات الطبقة المسماة رأس والميزات، وإثبات الاجتماعية، النهائي كبار المستشارين التقنيين وتذييل الصفحة. التمسك بهذه الآداب فوتوشوب سوف تبقى الأمور منظمة وسهلة للتنقل، أو تحرير. لإنشاء مجموعات انتقل إلى طبقة > الجديدة > المجموعة.. وتعطي كل واحد عنوان كما هو مذكور. إنشاء سريع لمجموعة فقط انقر فوق الرمز.
تصميم منطقة رأس
الرأس مهم جداً لكل موقع ويب كما هو أول فرصة لإقناع زائر جديد بأنه مفيد للبقاء في الموقع. وهذا، المصممين، نحتاج فيها إلى استخدام الصور ملفتة للنظر، ورسالة واضحة مع بعض الإجراءات للزائرين لاتخاذ.
الخطوة 1
دعونا أولاً بتغيير لون الخلفية لشيء من السهل جداً للعين، وفي حالتي أنا استخدم #ebebeb رمادية خفيفة. بعد ذلك، فتح رأس المجموعة واستخدام أداة المستطيل (U) رسم مستطيل 1000x600px ووضعه بين المبادئ التوجيهية الرأسي. ثم قم بتحميل الصورة المسافر الدراجة واسحبه إلى وثيقة Photoshop ووضعه فوق طبقة المستطيل. بعد أن اضغط باستمرار المفتاح Alt والماوس عبر طبقة الصورة حتى ترى قليلاً يشير السهم إلى الأسفل، ثم الإفراج عنها. قمت فقط بإنشاء "قناع القطع".
الآن ضرب CMD + T وتغيير حجم الصورة لتناسب احتياجاتك.
تلميح: اضغط باستمرار على المفتاح Shift لتحويل تناسبياً.
الخطوة 2
الآن نحن بحاجة إلى إضافة طبقة من اللون الشفاف تغميق الصورة أجزاء الصورة المشرقة بحيث تصبح أكثر قتامة وأبيض نص سوف تكون قابلة للقراءة بسهولة. قم بإنشاء طبقة جديدة فوق الصورة وإنشاء "قناع لقطة" لذلك أيضا. ثم ملء تلك الطبقة بلون داكن صلبة وتغيير العتامة بحوالي 20 في المائة حتى يمكن أن نرى بوضوح ما زالت الصورة.
الخطوة 3
الآن دعونا نضع شعار المستندة إلى الطباعة البسيطة والتنقل في الجزء العلوي. اختيار أداة أفقية نوع (T) وكتابة العنوان بدء التشغيل الخاص بك على الجانب الأيسر. تأكد من أنه قابل للقراءة ولديه مساحة كافية حوله. شعارنا في الزاوية اليسرى العليا هذا هو من اتفاقيات ويب شائعة وما يتوقع العديد من الزوار.
لقد استعملت خط إلير للعنوان و "بلا مفتوحة" لعناصر التنقل.
الخطوة 4
الآن دعنا اللعب مع الرسالة الرئيسية. عليك دائماً الحد من سترابليني إلى واحدة أو جملتين وتأكد من أنها قصيرة ويمكن قراءته بسهولة. في حالتي لقد استعملت Sans 32px مفتوحة لكتابة الرسالة الرئيسية، مع التركيز على "السفر" بجعله أكثر جرأة.
السطر الثاني أصغر بكثير، ولذلك مما اضطرها إلى تعتبر ذات أهمية ثانوية، حتى الناس سوف قراءته بعد الانتهاء من ذلك مع الرسالة الرئيسية. لقد على غرار ذلك مع أكبر التباعد بين الأحرف، نظراً للأحرف بأحرف كبيرة.
دائماً التفكير إشعار أين أضع الرسائل، وعلى النقيض من حيث أنه من الأفضل وضع النسخة قراءتها بسهولة من قبل القارئ.
الخطوة 5
إنشاء مكالمة بسيطة لعمل إعلام الزائرين ما يجب أن يفعلوه. في حالتي رسالة بسيطة تشير إلى الزائرين الاشتراك في النشرة الإخبارية. لقد استعملت 14px حجم الخط Serif PT (مائل).
الخطوة 6
لنقم بإنشاء نموذج بريد إلكتروني بسيط يسمح لزوار موقعنا إدخال عناوين بريدهم الإلكتروني واشترك في القائمة. إنشاء مجموعة جديدة تسمى نموذج البريد الإلكتروني. استخدام أداة المستطيل تقريب (U) مع دائرة نصف قطرها 3px لإنشاء لون أبيض بسيط (#FFFFFF) الإدخال.
الخطوة 7
إضافة نص التلميح للناس لفهم أين يمكن إدخال بريدهم الإلكتروني وإنشاء مكالمة لزر الإجراء. لقد استعملت 13px رمادي "مفتوحة بلا" (سيميبولد) (#bdbdbd) لإدخال النص والأبيض "مفتوحة بلا" (غامق) 13px (#FFFFFF) لنص الزر. اختيار لون جذاب للاتصال الرئيسي للعمل حيث أنها تبرز وتشجع على العمل.
في حالتي لقد استعملت الأخضر (#51a200) للاتصال الرئيسي للعمل. اختر أداة المستطيل (U) ورسم شكل مستطيل توضع فوق الإدخال بيضاء. ثم اضغط باستمرار المفتاح Alt وحرك الماوس فوق المستطيل الأخضر حتى ترى سهم أسفل أيقونة، حرر المفتاح، وسوف تقوم بإنشاء "قناع القطع".
تصميم ميزات المنطقة
هذا هو الجزء الأساسي الحق فوق منطقة حظيرة. إذا كان الناس مهتمون بما لديك لتقدمه أنهم سوف قم بالتمرير لأسفل لرؤية ما لديك بمزيد من التفصيل.
الخطوة 1
طي مجموعة الرأس بواسطة النقر فوق السهم الصغير الموجود بجوار اسم المجموعة. الآن نحن بحاجة لإنشاء خلفية مختلفة قليلاً لمنطقة الجسم من موقعنا على الإنترنت. ولقد استخدمت أداة المستطيل تقريب (U) مع دائرة نصف قطرها 5px واللون الأبيض #FFFFFF.
ضع الشكل الخاص بك تم إنشاؤه حديثا مباشرة فوق طبقة الخلفية الرئيسية.
الخطوة 2
قم بتوسيع مجموعة الميزات وابدأ في كتابة النسخة الخاصة بك. وأضاف في حالتي لقد خط الرسالة الرئيسية وعمودين من الميزات مع عنوان وفقرة قصيرة.
عندما تأكد من إنشاء نسخة إشراك أنها مقروءة وليست طويلة جداً. استخدام خط مختلف الأوزان والأحجام والألوان لإنشاء التسلسل الهرمي المرئي. وأخيراً، ولكن الأهم من ذلك؛ استخدام الكثير من المسافات. في حالتي استخدمت تباينات الخطوط "مفتوحة بلا" والرمادي الداكن #545454 #a2a2a2 رمادية خفيفة نسختي.
تصميم منطقة برهان الاجتماعية
الخطوة 1
الآن حان الوقت لتصميم منطقتنا الجسم الثاني يساعد زوار الموقع لتشكل عقولهم واتخاذ الإجراءات. سوف نقوم بتصميم منطقة برهان اجتماعية عرض اثنين من الشهادات.
أولاً نحن بحاجة إلى فصل منطقة السابقة بطريقة خفية. وقد استخدمت خط أداة (يو) تعيين إلى 1px مع اللون يجري #e8e8e8 رمادية خفيفة.
الخطوة 2
تصغير مجموعة الميزات وقم بتوسيع المجموعة "إثبات الاجتماعية". مرة أخرى كتابة عنوان الاحتفاظ بنفس الحجم الذي استخدمته من قبل. المفتاح لتنظيف تصميم الاتساق، وحتى مرة كنت قد استخدمت أحد الألوان والحجم قبل، تتمسك بتلك.
لدليل على المجال الاجتماعي ولقد استخدمت شهادات خيالية اثنين من الناس خيالية. الخط المستخدم لعرض الأسعار هو "حزب العمال الرقيق" والباقي هو "بلا المفتوحة" المستخدمة سابقا مع تباينات مختلفة الحجم والوزن.
الخطوة 3
كما ترون لقد تركت بعض المساحة أمام الأسماء. رئيس لأكثر "ما يواجه المستخدم" للحصول على بعض الصور الرمزية. وبعد ذلك اختر أداة القطع الناقص (U) والضغط باستمرار على المفتاح Shift رسم دائرة. وأخيراً نسخ ولصق الصورة الرمزية الخاصة بك فوق طبقة الدائرة والماوس عبر طبقة الرمزية الضغط على مفتاح Alt حيث ستقوم بإنشاء "قناع القطع".
لجعل الأمور أكثر تنظيماً إنشاء مجموعتين داخل الفريق "إثبات الاجتماعية" ووضع الطبقات شهادة في مجموعات منفصلة.
تصميم الكلمة النهائية في مجال العمل
ذكرت جودي ينبغي دائماً تكرار المكالمة الأولية للعمل حتى الناس الذين لا يشكلون رأيهم في المقام الأول يمكن أن تفعل ذلك بعد رؤية أكثر من موقع الويب الخاص بك.
الخطوة 1
دعونا منفصلة في منطقة السابقة باستخدام نفس الخط. العثور على طبقة الخط وبساطة ضرب CMD + J لتكرار ذلك وثم نقله أدناه شهادات ترك الكثير من الفضاء.
وبعد ذلك، اكتب العنوان الرئيسي للقسم والعنوان الفرعي بسيطة إعطاء مزيد من المعلومات أو إرشادات. كما ترون لقد استخدمت نفس النمط، ووزن وحجم الخطوط المستخدمة للأجزاء السابقة. عصا لنمط واحد لكل نسخة.
الخطوة 2
رئيس لأكثر من مجموعة الرأس والبحث عن مجموعة النموذج الخاص بك، بعد أن تكرار (CMD + J) والانتقال إلى المجموعة "النهائية من كبار المستشارين التقنيين". ضعه أدناه المراسلة وتخصيصه قليلاً عن طريق إضافة السكتة دماغية خضراء المحيطة بحقل الإدخال.
انقر بزر الماوس الأيمن على طبقة الإدخال واختر "خيارات المزج".. بعد ذلك تطبيق تأثير السكتة دماغية كما هو موضح أدناه. لون استخدمه هو #51a200.
تصميم الذيل
نحن القيام به مع الفريق "النهائية كبار المستشارين التقنيين" وحتى تصغيره وتوسيع تذييل المجموعة. وأخيراً دعونا إدخال بعض الارتباطات إلى الصفحات الداخلية لموقع الويب الخاص بك ووضع نص المؤلف بسيط على خط جديد. ولقد استخدمت الخط Sans مفتوحة (سيميبولد) للروابط.
لاحظ كيف يتم وضعها خارج الجسم الخلفية لتمييزه عن المحتوى الرئيسي. تأكد من استخدام تباعد متسقة أعلاه وأدناه النسخة حيث يبدو متوازنا.
الاستنتاج
في هذا البرنامج التعليمي قد مشيت لك من خلال عملية إنشاء موقع سفر بسيطة جداً ونظيفة الهبوط صفحة بما في ذلك بعض الأقسام الرئيسية التي تسمح لك بالتقاط الاهتمام الخاص بك للزوار، وتشجيع المزيد من الإجراءات.
والنتيجة تخطيط متوازن وخفيف الوزن مع تركيز قوي على الصور الملتقطة في منطقة أعلى والطباعة نظيفة في منطقة الجسم. إذا كان لديك أي أسئلة أو الأفكار، يرجى إعلامنا في التعليقات!
موارد إضافية
إذا كنت جديداً على "تصميم الصفحة المقصودة"، أننا نوصي بعدد من دروس تمهيدية لتحصل على سرعة تصل إلى مع الأساسيات:
- مبادئ تصميم الصفحة المقصودة: فتح التعيين-المرافقة للدورة Tuts + بورديلا عدي
- وهناك دليل المبتدئين للتحويل الناجحة بواسطة إيان ياتس
- نصائح لتصميم الصفحات المقصودة بكير ويتيكر المتخصصة
إذا كنت ترغب في الحصول على بعض المساعدة في تصميم "الصفحة المقصودة" الخاصة بك، قد ستوديو Envato جمع كبير من الهبوط صفحة تصميم & الخدمات الإنمائية التي قد ترغب في استكشاف. يمكن لك أيضا أن نلقي نظرة على "مواضيع الصفحة المقصودة" في Envato السوق.
