درس تصميم واجهه بكل سهوله

بسم الله الرحمن الرحيم



انشاء الله بعد ماتقرا الدرس هتكون عرفت ازاى تصمم واجهه

وازى تحط اللينكات فيها

ومش عاوز ين من حضرتك غير

انك تركز معانا

وكمان تكون مستب برنامج الفوتوشوب

وكمان برنامج front page



يلا نبتدى

ركز معايا ونبي

اول حاجه هنفتح

الفوتوشوب

ونقتح عمل جديد ويكون المقاس 770x600

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين كل واحد يعمل شكل على مزاجه

والى مبيعرفش يعمل زى بس يحاول يغير الالوان

اول حاجه اختار اللون بتاعك الى هيبقي خلفيه



بعدين

اختار الاداه

واملئ الخلفيه بلون الى تحبه

وانا مليتها بلون الاسود

وكل واحد حر التصميم ازواق ياجدعان

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بعدين

هنعمل layerجديد





وبعدين هناخد اداه التحديد

ونحدد كده

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين نعمل زى الفيديو ده

انا عملت الحته دى فيديو مع انها سهله بس اهوه

عشان تفهمو اكتر


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]



وبعد كده عاوزين نعمل البنر

يلا

نعمل layer جديد

وبعدين

ناخذ اداه التحديد الدائره



وبعدين نعمل دائره كبيره عشان تبقي هي البنر

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

هنسحبها لفوق شويه لحد ماتبقي كده

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

خدوا بلكم

وبعدين ناخد اداه التلوين

ونعمل خط راسي

كما في الصوره

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين نعمل strok طيب الى مبيعرفش يعمل كده



وبعدين

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

يارب

وبعدين كده يبقي عملنا البنر ناقص الفووتر

يلا نختار اداه التحديد الدائره



وبعدين نعمل دايره ونجرها لتحت لحد مايبقي شكلها كده

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين باداه التلوين

هنعمل خط راسي عشان يبقي شكلها كده

بس ياجدعان مش شرط نفس اللون الى انا عامله غيروا

وهتبقي في الاخر كده

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

كده يبقي خلصنا الهيكل

بس طبعا البنر والفووتر عاوزين شويه تعديل عليه يعنى صور واسم الموقع

وكده شويه تظابيط ودى بتعتمد

على مدى ابداع كل فرد

وكل ماهتكون كويس في الفوتوشوب هتعمل واجهات حلوه

يلا كده ناقص اننا نعمل الزراير

والزراير ممكن تعملها باداه pen tool

او باداه التحديد

بس دول لل نتقدمين شويه وانتو لسه اول مره تعملو واجهه

في طريقه حلوه

هنعمل الزراير بال shapes

يلا تابعو معايا

اختارو الاداه

وبعدين بصو فوق في شريط الادوات الى فوق



وبعدين دوس على السهم الصغير الى جمب الاعلامه بتاعت shape

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بس كده وبعد كده اختار الشكل الى عاوزه يبقي زرار

واعمل الزراير الى انت عايزها

وده بقي شكل الواجهه بتاحتى

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

دلوقتى بقي عايزين نحط اللينكات

ازاى نحطها

يلا ركزو معايا

هنختا اده التقطيع

وعاوزين نعمل مستيطلين بالطول

ومستطيلين بالعرض

وبعدين دوس

ctrl+alt+shift+s

وبعدين



وبعدين

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

لازم تبقي html and images

وسيفها في المكان الى انت عاوزه

وبعدين

هندخل على برنامج الفرونت بيج

ونفتح الواجهه الى امتدادها html الى عملناه بالفوتوشوب

يلا اضغط

ctrl+o

وبعد ماتفتح الصفحه هتبقي بالشكل ده

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بعدين

اذهب الى قائمه file واختر منها properties

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين

دوس كليك يمين على اي جزء من الواجهه

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وبعدين المنظر الاخير هيبقي كده

اضغط على الصورة لمشاهدتا بالحجم الطبيعي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]