Home
Publicationsتصميم واجهة موقع بطريقه بسيطه
علومي :: المواضيع المكررة و المؤرشفة Recycle Bin :: قسم التصميم و الجرافيكس :: دروس و شروحات الجرافيكس
Page 1 of 1
تصميم واجهة موقع بطريقه بسيطه
by شجون Sat Sep 18, 2010 2:27 am
تصميم واجهة موقع بطريقه بسيطه
نصيحه قبل البدء : أثناء متابعتك لخطوات الدرس يجب أن يكون هدفك تعلم أساليب جديده تفيدك في تصاميم أخرى و ليسالوصول لنتيجه مشابهه لما هو مشروح في الدرس فحسب , فالمصمم الناجح هو منيكون متقن للكثير من الأساليب و التقنيات لتخدمه في ظهور كل تصاميمه فيأحسن حال و بأفكار متجدده دوما ..
النتيجه النهائيه لدرس اليوم
قم بفتح مساحة عمل جديده بالأبعاد التاليه (1000X1000px)
قم بتلوين الخلفيه باللون 0e4b7f
الان قم بعمل طبقه جديده و سميها ‘header highlight’
سنقوم الان بعمل تدرج إشعاعي "radial gradient" من اللون الأبيض للشفاف في الجزء العلوي من مساحة العمل
قم بتغير الـ blend mode الخاص بالطبقه إلى ‘overlay’
قلل الـ opacity الخاص بنفس الطبقه إلى 50%
حمل من هنا خامه معدنيه سنستعملها في التصميم ,, بعد التحميل قم بوضعها في مساحة العمل الخاصه بنا
قم بالذهاب إلى image>adjustments>desaturate
ثم قم بالذهاب إلى image>adjustments>levels و طبق نفس الإعدادات الموجوده في الصوره التاليه
قم بتقليل الـ opacity الخاص بطبقة الخامه المعدنيه إلى 10%
سنستعملالان خيارnew guide من قائمة View سنقوم بعمل vertical مره 50px و مره950px ,, و سنقوم بعمل horizontal مره 100px و مره 950px
ثم قم بتلوين تلك المنطقه باللون الأبيض بإستعمال أداة marquee tool و أداة paintbucket tool
قم بتحميل صورة اللاب توب الموجوده هنا ثم قم بإدراجها في مساحة العمل الخاصه بنا
ثم قم بتعديل الـ levels الخاصه بها كما في الصوره التاليه
الان سنقوم بوضع صوره على شاشة اللاب و لتكن صوره موقع لأحد عملائك مثلا
لنجعل الصوره متناسبه شاشة اللاب قم بالذهاب إلى edit>transform>distort ..
قم بتطبيق stroke عليها كما في الصوره التاليه
قم بإضافة نصوص كتابيه جانب اللاب .. انا قمت بإستعمال خط Arial مع جعل العنوان باللون 408dd0 و النص باللون 8e8e8e
الان سنستعمل المستطيل دائري الزاويا (rounded rectangle) مع (10px radius) لعمل الأزرار الخاصه بالموقع
سنستعمل ظلال inner shadow و تدرجات gradient overlay بنفس الأعدادت الموجوده في الصوره التاليه
قمبعمل طبقه جديده و سميها ‘bottom area’ و بإستعمال أداة marquee tool قمبتلوين ذالك الجزء ثم قم بتطبيق inner shadow عليه من خيارات الـ blendingoption بنفس الإعدادات الموجوده في الصوره التاليه
الان أضف المحتويات التي تريدها في الواجهه
أضف الحقوق في الأسفل
و إنتهى الدرس بحمد الله تعالى
الدرس الأصلي من إنتاج موقع psdfan و تمت الترجمه من قبلي MonTexo حصريا و خصيصا لمنتديات بكسل التعليميه pxll.com
شجون- الجنس :
عدد المساهمات : 502
النقاط : 53806
التقييم : 26
تاريخ التسجيل : 2010-02-23
Similar topics» تصميم بوستر بطريقه مبتكره
» انتثار الكلمه بطريقه رائعه
» درس تصميم موقع بالفوتوشوب بالتفصيل
» كتابان لتعلم تصميم موقع بالفوتوشوب
» تعلم الآن تصميم موقع كامل بإحترافيه من الصفر -فيديو باللغه العربيه
» انتثار الكلمه بطريقه رائعه
» درس تصميم موقع بالفوتوشوب بالتفصيل
» كتابان لتعلم تصميم موقع بالفوتوشوب
» تعلم الآن تصميم موقع كامل بإحترافيه من الصفر -فيديو باللغه العربيه
علومي :: المواضيع المكررة و المؤرشفة Recycle Bin :: قسم التصميم و الجرافيكس :: دروس و شروحات الجرافيكس
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|