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


الموقع الرسمى لمدينة اوسيم
 
الرئيسيةأحدث الصورالتسجيلدخول

 

 تصميم واجهة موقع بطريقه بسيطه

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin
Admin


عدد المساهمات : 408
تاريخ التسجيل : 25/10/2011
العمر : 31
تعاليق : لا اله الا الله عدد ماكان وعدد مايكون وعدد الحركات والسكون

لاتكن جبانا أثبت وجودك في المنتدى
قل كلمتك

تصميم واجهة موقع بطريقه بسيطه  Empty
مُساهمةموضوع: تصميم واجهة موقع بطريقه بسيطه    تصميم واجهة موقع بطريقه بسيطه  Emptyالثلاثاء نوفمبر 01, 2011 12:53 pm

أولا رجاء خاص إخواني و أخواتي الأعزاء .. لا تنسوا الدعاء لأخونا وليد مؤسس الموقع بالرحمه و المغفره ...

أهلا و سهلا بكم مره أخرى في سلسلة الدروس المترجمه حصريا لبكسل: تصميم واجهة موقع بطريقه بسيطه  Smile)) ..

مقدمه السلسله

نصيحه قبل البدء : أثناء متابعتك لخطوات الدرس يجب أن يكون هدفك تعلم أساليب جديده تفيدك في تصاميم أخرى و ليس
الوصول لنتيجه مشابهه لما هو مشروح في الدرس فحسب ,
فالمصمم الناجح هو من يكون متقن للكثير من الأساليب و التقنيات
لتخدمه في ظهور كل تصاميمه في أحسن حال و بأفكار متجدده
دوما ..


النتيجه النهائيه لدرس اليوم

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-1



قم بفتح مساحة عمل جديده بالأبعاد التاليه (1000X1000px)

قم بتلوين الخلفيه باللون 0e4b7f

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-2

الان قم بعمل طبقه جديده و سميها ‘header highlight’

سنقوم الان بعمل تدرج إشعاعي "radial gradient" من اللون الأبيض للشفاف في الجزء العلوي من مساحة العمل

قم بتغير الـ blend mode الخاص بالطبقه إلى ‘overlay’

قلل الـ opacity الخاص بنفس الطبقه إلى 50%

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-3
تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-3

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-4

حمل من هنا خامه معدنيه سنستعملها في التصميم ,, بعد التحميل قم بوضعها في مساحة العمل الخاصه بنا

قم بالذهاب إلى image>adjustments>desaturate

ثم قم بالذهاب إلى image>adjustments>levels و طبق نفس الإعدادات الموجوده في الصوره التاليه

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-5


قم بتقليل الـ opacity الخاص بطبقة الخامه المعدنيه إلى 10%

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-6


سنستعمل
الان خيارnew guide من قائمة View سنقوم بعمل vertical مره 50px و مره
950px ,, و سنقوم بعمل horizontal مره 100px و مره 950px


ثم قم بتلوين تلك المنطقه باللون الأبيض بإستعمال أداة marquee tool و أداة paintbucket tool

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-7


تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-8


قم بتحميل صورة اللاب توب الموجوده هنا ثم قم بإدراجها في مساحة العمل الخاصه بنا

ثم قم بتعديل الـ levels الخاصه بها كما في الصوره التاليه

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-9

الان سنقوم بوضع صوره على شاشة اللاب و لتكن صوره موقع لأحد عملائك مثلا

لنجعل الصوره متناسبه شاشة اللاب قم بالذهاب إلى edit>transform>distort ..

قم بتطبيق stroke عليها كما في الصوره التاليه

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-10


قم بإضافة نصوص كتابيه جانب اللاب .. انا قمت بإستعمال خط Arial مع جعل العنوان باللون 408dd0 و النص باللون 8e8e8e

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-11


الان سنستعمل المستطيل دائري الزاويا (rounded rectangle) مع (10px radius) لعمل الأزرار الخاصه بالموقع

سنستعمل ظلال inner shadow و تدرجات gradient overlay بنفس الأعدادت الموجوده في الصوره التاليه




تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-13

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-14

قم
بعمل طبقه جديده و سميها ‘bottom area’ و بإستعمال أداة marquee tool قم
بتلوين ذالك الجزء ثم قم بتطبيق inner shadow عليه من خيارات الـ blending
option بنفس الإعدادات الموجوده في الصوره التاليه


تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-15


الان أضف المحتويات التي تريدها في الواجهه

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-16


أضف الحقوق في الأسفل

تصميم واجهة موقع بطريقه بسيطه  Textured-portfolio-design-17

و إنتهى الدرس بحمد الله تعالى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://awseemvb.all-up.com
 
تصميم واجهة موقع بطريقه بسيطه
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» درس تصميم موقع كامل من الألف الى الياء شرح ممل
» [تصميم موقع بالفوتوشوب و الفرونت بيج من الالف إلى ما بعد الياء
» تعليم تصميم موقع كامل بطريقة احترافية
» آلاف القوالب الجاهزة على الفرونت بيج مع ادوات تصميم المواقع
» اكثر من 270 موقع للخلفيات

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
الموقع الرسمى لمدينة اوسيم :: تصميم مواقع-
انتقل الى: