الرئيسيةالتسجيلمكتبي  الرسائل الخاصةالبحثالخروج

  
 


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


الرئيسيةالرئيسية  البوابةالبوابة  الأحداثالأحداث  أحدث الصورأحدث الصور  التسجيلالتسجيل  دخول  

منتديات ابداع نت :: عالم الابداع :: عالم التصميم :: عالم التصميم :: قسم تعليم التصميم لاعضاء

  
شاطر
 

  
 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Empty2011-08-17, 14:57
المشاركة رقم:

avatar

إحصائية العضو

الجنس : انثى
المساهمات : 426
نقاط : 540
السمعة : 0
مُساهمةموضوع: تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


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

أهلا و سهلا بكم مره أخرى في سلسلة الدروس المترجمه حصريا لبكسل:  تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) 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


و إنتهى الدرس بحمد الله تعالى

الدرس الأصلي من إنتاج موقع psdfan و تمت الترجمه من قبلي MonTexo حصريا و خصيصا لمنتديات بكسل التعليميه pxll.com




توقيع : L!N@ SM:)e




 

  
 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Empty2011-08-17, 18:07
المشاركة رقم:

Mohamad Yasser

إحصائية العضو

الجنس : ذكر
المساهمات : 7220
نقاط : 8697
العمر : 24
السمعة : 1
مُساهمةموضوع: رد: تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


موضوع في قمة الرؤعة


يعطيكـ الف عافية


وكثر الله من امثالكـ





الموضوع الأصلي : تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) // المصدر : منتديات أحلى حكاية // الكاتب: Mohamad Yasser


توقيع : Mohamad Yasser




 

  
 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Empty2011-09-11, 14:27
المشاركة رقم:

avatar

إحصائية العضو

الجنس : ذكر
المساهمات : 804
نقاط : 984
السمعة : 0
مُساهمةموضوع: رد: تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


يسسسسسسسسسسسسسسسسسسسسسسسسسلمو




توقيع : Tiger Wicked




 

  
 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Empty2011-11-26, 12:12
المشاركة رقم:
زائر

Anonymous

إحصائية العضو

مُساهمةموضوع: رد: تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


يسسسسسلمو آيدكـــ ،،





توقيع : ????




 

  
 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Empty2012-02-05, 02:47
المشاركة رقم:
المدير العام

ḾŖ.ảĦḾảḊ

إحصائية العضو

الجنس : ذكر
المساهمات : 5602
نقاط : 11719
السمعة : 0
مُساهمةموضوع: رد: تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


شكرا لك علي ابداعك واجتهادك  تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) 922170




الموضوع الأصلي : تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) // المصدر : منتديات أحلى حكاية // الكاتب: ḾŖ.ảĦḾảḊ


توقيع : ḾŖ.ảĦḾảḊ




 

  
 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Empty2012-03-04, 10:25
المشاركة رقم:

ۈهَم ♫

إحصائية العضو

الجنس : انثى
المساهمات : 6305
نقاط : 7151
العمر : 28
السمعة : 1
مُساهمةموضوع: رد: تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية )


يسٍسٍسٍلمو عآلطرحٍ
ربيٍ يعطًٍيًك آلف عآفيةةٍ


 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) 857471


بأنتظآر كلٍ جديدً منكك




توقيع : ۈهَم ♫




 


  
الإشارات المرجعية
 

  
التعليق على الموضوع بواسطة الفيس بوك
 

  
الــرد الســـريـع
..

 



  
الذين يشاهدون محتوى الموضوع الآن : 20 ( الأعضاء 3 والزوار 17)
 



 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Collapse_theadتعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة



Loading...

  
 

 تصميم واجهة موقع بطريقه بسيطه (لن تندم احترافية ) Cron