شاطر|

شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100%

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

عدد المساهمات : 5538

نقاط : 36170

الموقع : www.algmax.own0.com

شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% Empty
مُساهمةموضوع: شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% Calend10الخميس يونيو 28, 2012 1:20 pm

شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100%
شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100%
شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100%
شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100%
شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100%

هذا هو التصميم النهائي
اضغط هنا
في
هذا الدرس سوف تتعلم كيف تقوم بتصميم واجهة احترافية لموقع خاص بالمصممين
ليعرضوا فيه أعمالهم ونبذة عنهم. أعتقد أنك سوف تتعلم الكثير من التقنيات
الجديدة في هذا الدرس الاحترافي. خصوصاً التعامل مع أداة القلم والتعامل مع
أنماط الطبقات.

سوف نفترض في هذا الدرس أنك ملم بأساسيات التعامل مع برنامج الفوتوشوب ولديك
خبرة في التعامل مع الأدوات وخصائصها والطبقات فنحن لن نبين عدداً من
الخطوات البديهية لأن ذلك قد يجعل الشرح مطولاً أكثر من اللازم. لذلك ننصحك
بتعلم الأساسيات والإلمام بها قبل المضي قدماً في هذا الدرس.

والآن لنبـــــــــــــــدأ

قم بإنشاء مستند جديد 960 × 993 بكسل وبخلفية بيضاء.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 1

قم بملء الخلفية باللون #282828 ثم قم باختيار أداة الفرشاة وقم بتعين الفرشاة الدائرية إلى 200 بكسل واجعل قيمة Hardness للفرشاة 0% ثم قم بتعيين اللون الأمامي إلى #717171.

قم بوضع هذه الفرشاة في أعلى الجهة اليمنى لكي نقوم بوضع شعار الموقع فوقها بعد قليل.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 2

باستخدام أداة النص قم بكتابة اسم الموقع فوق هذه الدائرة التي قمنا بوضعها.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 3

قم بمضاعفة طبقة اسم الموقع وقم بتحريكها إلى الأسفل قليلاً

ثم قم بالذهاب إلى Edit > Transform > Flip Vertical

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 4

اضغط على الطبقة ومن ثم قم باختيار Rasteraize Type.

قم باختيار أداة الممحاة وعين حجمها إلى 150 بكسل واجعل قيمة Hardness للفرشاة 0% ثم قم بمسح نصف هذه الطبقة باستخدام الممحاة.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 5

قم بتعيين اللون الخلفي إلى #3a3a3a ثم قم بانتقاء أداة الفرشاة ومن ثم قم باختيار الفرشاة رقم 1393 ( حملها من هنا ).


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 6

قم بوضع الفرشاة في خلف الشعار والدائرة التي وراءه وقم بوضع جزء منها في الجهة اليسرى من الصفحة أيضاً.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 7

باستخدام أداة Rounded Rectangle Tool سوف نقوم بإنشاء شريط الإبحار الخاص بموقعنا

من شريط خصائص هذه الأداة قم بتعيين قيمة نصف القطر Radius إلى القيمة 3 بكسل.

ثم قم بإنشاء شريط الإبحار في منتصف الصفحة


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 8

قم بضبط الأنماط التالية ( لإظهار نافذة أنماط الطبقات قم بالضغط على الطبقة بالزر الأيمن واختر Blending Options ).


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 9


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 10

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

قم بإنشاء طبقة جديدة ثم قم بالذهاب إلى Select > Modify > Expand ثم قم بوضع القيمة 1 بكسل.

سوف تلاحظ أن مساحة التحديد قد زاد حجمها بمقدار 1 بكسل.

قم الآن بإخفاء طبقة شريط الإبحار وانتقل إلى الطبقة التي أنشأتها للتو ( مع حرصك على بقاء التحديد ).

قم بانتقاء أداة التدرج اللوني Gradient Tool من شريط خصائص الأداة ثم قم بضبط هذه الخصائص


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 11

قم الآن بإنشاء ثلاث تدرجات لونية بهذه الطريقة


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 12

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 13

لاتقم بإلغاء التحديد لكي نتابع العمل. قم الآن بإنشاء طبقة جديدة وقم باختيار أداة الفرشاة ( 100 px ) وعين اللون الأمامي إلى #7f6093.

باستخدام الفرشاة قم بتطبيق ما يلي


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 14

قم بإلغاء التحديد ( Ctrl + D ) ثم اكتب عناوين صفحات الموقع على شريط الإبحار بأداة النص مع بضبط خصائصها إلى


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 15

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 16

باستخدام أداة القلم Pen Tool قم برسم مسار شبيه بهذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 17

قم الآن بانتقاء أداة الفرشاة واختر فرشاةً دائريةً ( 5 px و 100% Hardness ) وعين اللون الأمامي إلى #ac7ccd.

قم الآن بانتقاء أداة القلم مرة أخرى ثم قم بالضغط على المسار بزر الفأرة الأيمن واتبع الآتي


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 18


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 19

قم بالضغط على زر Esc لإلغاء المسار.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 20

باستخدام أداة الممحاة قم بمسح جزء من هذا الخط ( يمكنك تحديد طبقة مستطيل الإبحار لتسهيل العملية ).


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 21

( قم بإلغاء التحديد عن طبقة مستطيل الإبحار Ctrl + D ) ثم قم بتطبيق هذه الأنماط على طبقة الشعاع البنفسجي.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 22


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 23

قم بمضاعفة الطبقة واختر الطبقة الجديدة ومن ثم توجه إلى Filter > Blur > Gaussian Blur وعين القيمة إلى 6 بكسل.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 24

قم
بتحديد مستطيل الإبحار كما فعلنا سابقاً ثم قم برسم بعض الدوائر باستخدام
أداة الفرشاة ( 150 px و 0% Hardness ) مع اللون الأمامي #ac7ccd.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 25

باستخدام أداة Rounded Rectangle Tool ( Radius 3 px ) قم برسم مستطيل كبير واجعله أسفل طبقة الشعاع البنفسجي.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 26

قم بتطبيق الأنماط التالية


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 27


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 28

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 29

قم بعمل مستطيل آخر بنفس الطريقة السابقة وقم بتطبيق الأنماط التالية


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 30


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 31

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 32

سوف نبدأ الآن بإنشاء زري التالي والسابق لعارض الصور.

لذلك قم بعمل مجلد جديد ( مجموعة ) من نافذة الطبقات وقم بتعيين التسمية Next لها لكي نقوم بوضع طبقات الزر بداخلها.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 33

قم الآن باستخدام أداة Rounded Rectangle Tool لإنشاء مستطيل ( Radius 3 px ) بهذا الشكل


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 34

طبق هذا النمط على المستطيل


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 35

قم بإنشاء طبقة جديدة ثم قم بتحديد المستطيل ( شرحنا الطريقة في البداية ).

باستخدام أداة الفرشاة قم بإنشاء دائرة ( شعاع ) ولكن قبل ذلك اضبط خصائص الفرشاة كما يلي


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 36

الآن قم بإنشاء هذه الدائرة كما يلي


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 37

قم بإنشاء طبقة جديدة وانتقي أداة القلم ثم قم باتباع هذه الخطوات ( سوف نستخدم Pen Tool ثم Convert Point Tool )


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 38

قم بالضغط على المسار بالزر الأيمن للفأرة ثم Make Selection.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 39

باستخدام أداة الفرشاة قم بتعيين الخصائص التالية ثم ضع الفرشاة على طبقة جديدة.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 40


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 41

قم بتغيير شفافية الطبقة إلى 50% وباستخدام أداة الممحاة قم بمسح بعض الأجزاء الجانبية من هذه الدائرة

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 42

قم بانتقاء أداة Polygon Tool ثم طبق الخصائص الآتية من شريط خصائص الأداة


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 43

قم الآن برسم المثلث بهذا الشكل ( قد يفيدك استخدام مفتاح Shift ).


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 44

وقم الآن بضبط الأنماط التالية على طبقة المثلث


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 45


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 46

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 47

قم
بعمل خط مشابه لهذا الخط الأبيض الموجود في الصورة ( طريقة عمل هذا الخط
مشابهة تماماً لما فعلناه في الخطوط الموجودة حول شريط الإبحار – يمكنك
مراجعة ذلك ).

ولكن تأكد أن تضع هذا الخط خلف جميع طبقات الزر.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 48

سوف نقوم الآن برسم الزوايا ( ولكن تأكد أن تجعل الزوايا خلف جميع طبقات الزر ).

يمكنك باستخدام أداة Zoom Tool تكبير الزر لكي تستطيع تصميم الزوايا بدقة أكبر.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 49

وباستخدام أداة القلم Pen Tool سوف نقوم برسم مثلث كهذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 50

نقوم الآن بالضغط على المسار بالزر الأيمن للفأرة ثم Make Selection.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 51

نقوم الآن بطلاء المثلث بأي لون بأداة الطلاء ( أو الملء ) Paint Bucket Tool. ثم نقوم بتطبيق النمط الآتي.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 52

نقوم الآن بمضاعفة طبقة المثلث ومن ثم نتوجه إلى Edit > Transform > Flip Vertical.

وباستخدام أداة النقل Move Tool قم بنقل الطبقة الجديدة ( التي تم قلبها ) إلى أسفل الزر.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 53

قم
الآن بدمج الزاويتين في طبقة واحدة عن طريق اختيارهما معاً من نافذة
الطبقات ( يمكنك ذلك باستخدام Ctrl والضغط على اسم الطبقة ).

ثم قم بالتوجه إلى Layer > Marge Layers ( Ctrl + E ).

نقوم الآن بمضاعفة المجلد ( المجموعة ) التي تحتوي على الطبقات المتعلقة بهذا الزر.

بالضغط على المجموعة الجديدة بالزر الأيمن للفارة ومن ثم الضغط على Duplicate Group سوف يتم مضاعفة المجموعة.

سوف نقوم الآن باختيار المجموعة الجديدة والتوجه إلى القائمة Edit > Transform > Flip Horizontal.

وباستخدام أداة النقل نقوم بنقل المجموعة الجديدة التي تم قلبها إلى الجهة المقابلة من عارض الصور.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 54

نقوم الآن بإنشاء مربع البحث.

باستخدام أداة التحديد Rectangular Marquee Tool سوف نقوم بعمل مربع البحث لذلك قم بضبط هذه الخصائص من شريط خصائص الأداة


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 55

قم برسم مستطيل بهذا الشكل


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 56

ثم قم بضبط هذه الإعدادات بعد الضغط على زر Refine Edge من شريط خصائص أداة التحديد


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 57

ولكي نقوم بإنقاص التحديد نطبق الخصائص التالية على أداة التحديد


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 58

ثم نحدد بهذا الشكل


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 59

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 60

نقوم الآن في طبقة جديدة بملء التحديد بأي لون باستخدام أداة الملء ثم نقوم بتطبيق الأنماط التالية على الطبقة


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 61


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 62

إذا قمت بإلغاء التحديد فقم بتحديد المربع مرة أخرى باستمرار الضغط على Ctrl ثم الضغط على طبقته.

قم بملء طبقة جديدة باستخدام الباترن ( حمله منه هنا ) باستخدام أداة الملء Paint Bucket Tool مع ضبط خصائص الأداة


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 63

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 64

باستخدام أداة Rounded Rectangle Tool ( Radius 5 px ) قم برسم خانة البحث كما يلي ثم قم بضبط الأنماط


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 65


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 66

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 67

قم
بتحديد طبقة مستطيل البحث الكبير و باستخدام أداة الفرشاة اختر فرشاةً
دائريةً ( 100 px و 0% Hardness ) وقم برسم دائرة في طبقة جديدة، ولا تنسى
كتابة عبارة البحث ( 30 pt ).


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 68

باستخدام أداة التحديد سوف نقوم بإنشاء مربع كبير في طبقة جديدة ومن ثم نقوم بطلائه باللون #c6c5c5 بهذا الشكل ( علماً بأنه يمتد إلى نهاية الصفحة ).


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 69

نقوم الآن بتحديد طبقته ثم نقوم بوضع باترن في أعلى هذا المربع مع ضبط خصائص أداة الملء كما يلي


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 70

وباستخدام أداة الممسحة نقوم بمسح أجزاء من هذا الباترن حتى يصبح كهذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 71

نقوم الآن بضبط الأنماط التالية على طبقة المربع.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 72

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 73

قم
بإنشاء مجلد جديد ( مجموعة ) من نافذة الطبقات وباستخدام أداة Rounded
Rectangle Tool سوف نقوم برسم مستطيل صغير بعد ضبط خصائص الأداة


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 74

ارسم مستطيلاُ بهذا الشكل ثم قم بوضع بعض العبارات عليه باستخدام أداة النص Type Tool.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 75

قم الآن بمضاعفة المجموعة التي تحتوي على هذا المستطيل والعبارات المرتبطة به هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 76

باستخدام أداة Rounded Rectangle Tool ( Radius 10 px ) قم برسم مستطيل كما يلي ثم قم بضبط الأنماط التالية :


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 77


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 78

قم بمضاعفة هذا المستطيل ونقله باستخدام أداة النقل Move Tool.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 79

باستخدام أداة Rounded Rectangle Tool ( Radius 10 px ) قم برسم مستطيل صغير ليكون عبارةً عن زر كما يلي ثم قم بضبط النمط التالي :


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 80

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 81

سوف نقوم الآن بإنشاء تذييل الصفحة.

قم
بتكبير الصفحة باستخدام أداة Zoom Tool لكي نقوم بعمل فاصل باستخدام أداة
قلم الرصاص Pencil Tool بهذه الخصائص ( 1 px و 100% Hardness ).

سوف نقوم بعمل خطين ( العلوي بلون #8c8b8b والسفلي بلون #a9a8a8 ) ولكي تقوم بعمل خط مستقيم تماماً قم برسمه مع الضغط على Shift.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 82

قم
الآن بمد هذا الخط على امتداد عرض الصفحة عن طريق الضغط على ( Ctrl + T )
سوف تتمكن من تحرير حجمه. قم بمسح جانبي هذا الخط باستخدام أداة الممحاة.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 83

باستخدام أداة الشكل البيضاوي Ellipse Tool سوف نقوم برسم شكل بيضاوي ليكون خلف هذا الخط.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 84

نقوم الآن بالتوجه إلى Filter > Blur > Gaussian Blur ووضع القيمة 6.0 بكسل.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 85

نقوم
الآن بإنشاء مستطيل كبير في طبقة جديدة باستخدام أداة التحديد ومن ثم
نقوم بطلاء هذا المستطيل بأي لون ثم نقوم بتطبيق الأنماط التالية


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 86

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 87

وباستخدام أداة القلم نقوم برسم المسار التالي ثم نضغط عليه بالزر الآيمن ونختار Make Selections.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 88


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 89

باستخدام أداة التحديد نقوم بإنقاص التحديد حتى لا يخرج عن المربع الكبير الأسود الذي خلفه ( كما تعلمنا سابقاً في هذا الدرس ).

وباستخدام
أداة التدرج اللوني Gradient Tool قم بإنشاء تدرج لوني ( من اللون الأسود
إلى الشفاف ) في طبقة جديدة بعد ضبط خصائص الأداة.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 90


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 91

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 92

سوف نقوم بعمل فاصل كما تعلمنا قبل قليل ولكن الفاصل سوف يكون خطاً واحداً فقط وبحجم 2 بكسل وباللون #464546. ثم نقوم بعمل ظل باستخدام أداة الشكل البيضاوي أيضاً كما سبق.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 93

باستخدام أداة Rounded Rectangle Tool ( Radius 4 px ) قم برسم المستطيلات التالية ولاتسنى كتابة بعض البيانات باستخدام أداة النص.


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 94

قم
باختيار طبقة المستطيل الذي يحتوي على معلومات الاتصال ثم قم بالتوجه إلى
Layer > Rasteraize > Shape. وباستخدام أداة التحديد قم بتحديد جزء
من هذا المستطيل وقم بحذفه بالضغط على زر Delete.

يفترض أن تكون النتيجة هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% 95

قم
الآن بإضافة بعض أيقونات المواقع الاجتماعية التي اشتركت بها ثم قم
بإضافة بعض أعمالك إلى المستطيلات التي تحت عبارة من أعمالنا وقم أيضاً
بإضافة صورة إلى مستطيل عارض الصور ليكون الموقع قد اكتمل.

يمكنك تحميل أيقونات المواقع الاجتماعية من موقعي أيقونتي وiconfinder.

سوف تكون النتيجة النهائية للموقع هكذا


شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100% Final
الموضوع منقول من
تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://algmax.own0.com

شرح تصميم واجهة موقع بالفوتوشوب بتأثيرات ضوئية واحترافية 100%

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

مواضيع مماثلة

-
» درس تصميم بنر متحرك بالفوتوشوب,كيفية تصميم اعلان متحرك باستخدام برنامج الفوتوشوب photoshop» صنع إستايل بالفوتوشوب» شرح صنع توقيع فكتوري بالفوتوشوب» افتراضي درس كيفية الكتابه على الصور بالفوتوشوب (للمبتدئين) » درس دخول وخروج الصورة بتأثيرات جميله
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
ألجي ماكس , algmax :: قسم الإبداع والتصميم ::   :: أقسام التصميم :: دروس الفوتوشوب-
 
Alexa Certified Traffic Ranking for https://algmax.own0.com free counters
Share
سحابة الكلمات الدلالية
الثورة firefox تسجيل دائرة فيرفوكس انتصار تاريخ التوتة اعضاء