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

هذا هو التصميم النهائي
اضغط هنا

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

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




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

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




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




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

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

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




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

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

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




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




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

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




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

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

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




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







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

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

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

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

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




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




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




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

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




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




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




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




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

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







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

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




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




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







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

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




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




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




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







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




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







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




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

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




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




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




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

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




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




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




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




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







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

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




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




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




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







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




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

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




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

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




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




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




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




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

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

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




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

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

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

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

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

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

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




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

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




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




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




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




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




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




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







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

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




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




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







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




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




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




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




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




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




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




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




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




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




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







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

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




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




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




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

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

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




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

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




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




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

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




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




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




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







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

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







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




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

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




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




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

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




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

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

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