التخطي إلى المحتوى الرئيسي

درس تصميم فوتوشوب صورة ملصقة


نبدأ الدرس بسم الله …

أولاً نفتح الفوتوشوب ثم نختار File -> New


نحدد الحجم المناسب للخلفية حسب دقة الشاشة وهنا لدي في جهازي 1280 × 1024


الأن تم إنشاء صفحة بيضاء كبيره , راح نضيف خلفية عليها وذالك باستخدام Texture معين وهي هذه الخلفية الخشبية بعد فتحها قم بنسخها وبعد ذالك لصقها في الصفحه مباشرة.



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


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




لتكون النتيجه كالتالي



بعدها نريد ان نجعل الخلفية بلون خشبي جميل وذالك عن طريق الخطوات التالية



ثم ستعرض لنا هذه النافذة نقوم بعمل كما في الصورة بالضبط



لتصبح نتيجة الخلفية كالتالي

بعدها نقوم بدمج الطبقتين التي تحتوي على الصورة

ثم نختار تحديد تحريك الطبقه كما في الصورة التالية

يتم اختيار وضع التحريك كما في الصورة التالية ليتم “ثني الورقة”

قم بثني الجزء الأيسر السفلي من الورقة لتكون كأنها مثنيه على جنب بشكل بسيط.

الأن نريد ان نحرك الورقة او الصورة ونقوم بتدويرها قليلاً إلى اليسار وذالك كالتالي

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

ثم نقوم بتحديد طبقة صورة المسجد الحرام ليتم أخذ التحديد الخاص بها وذالك عن طريق تأشير الفأرة على الطبقة ثم الضغط على CTRL + الزر الأيمن من الفأرة

بعدها سيكون تم التحديد على الصورة ولكن تذكر انك لازلت في الطبقه الجديده الفارغه كما في الصورة السابقة
تأكد من انك محدد على أداة التحديد لأننا نريد تحريك التحديد

بعدها اضغط بلوحة المفاتيح الرز المؤشر إلى الأسفل 5 مرات او اكثر ومن ثم إلى اليسار 5 مرات او اكثر ليكون كالتالي


الأن نريد ان نحرك التحديد إلى اليمين قليلاً ليكون أشبه بضل حقيقي خلف الجدار الخلفية



yatibah18 درس تصميم فوتوشوب صورة ملصقة

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

yatibah20 درس تصميم فوتوشوب صورة ملصقة

الأن قم بالضغط على CTRL + A ليتم إزالة التحديد وطبعاً انت لازلت في طبقة الضل لأننا سنقوم بعمل تأثير يتم تمويه اللون الأسود كالضل
yatibah21 درس تصميم فوتوشوب صورة ملصقة
yatibah22 درس تصميم فوتوشوب صورة ملصقة
yatibah23 درس تصميم فوتوشوب صورة ملصقة

هكذا الأن انتهينا من الصورة بشكل كامل
yatibah24 درس تصميم فوتوشوب صورة ملصقة

ننتقل إلى الشريط اللاصق وهو بكل سهوله نقوم باختيار أداة القلم
yatibah25 درس تصميم فوتوشوب صورة ملصقة

ثم رسم الشريط اللاصق كالتالي
yatibah26 درس تصميم فوتوشوب صورة ملصقة

yatibah27 درس تصميم فوتوشوب صورة ملصقة

نقوم بجعل الشريط اللاصق شفاف تماماً

yatibah28 درس تصميم فوتوشوب صورة ملصقة


ثم نختار Blending Options  على طبقة اللشريط اللاصق ليتم عمل ستايل معين عليه
والستايل هو كالتالي
yatibah29 درس تصميم فوتوشوب صورة ملصقة

لتكون النتيجة كالتالي
yatibah30 درس تصميم فوتوشوب صورة ملصقة

الأن انتهينا من العمل لم يتبقى إلى الجملة التي بأعلى التصميم وهذه من خلال نص عادي + تأثير ستايل بكل بساطه

تعليقات

المشاركات الشائعة من هذه المدونة

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

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

كيف تستفيد من أداة Inspect Element في جوجل كروم

Inspect Element هي أداة توجد في متصفح جوجل كروم وهي أداة وضعت خصيصا لمطوري الويب أو web devloper فيها العديد من المميزات لمساعدة مطور الويب في عمله و لهدا سأريك في هدا الدرس أهم الاستعمالات لأداة Inspect Element  كيف تستفيد من أداة Inspect Element في جوجل كروم  نافذة Elements من هده القائمة يمكنك مشاهدة جميع عناصر الصفحة و أكواد ال css الخاصة بكل عنصر ,ويمكنك التعديل عليها حسب ذوقك ادا كنت تتقن ال HTML و CSS  نافذة Sources هده النافذة تمكنك من مشاهدة مصادر موقعك التي تتمثل في السكريبتات  و كل ما يتصل به موقعك نافذة Resources هده النافذة تقوم باضهار موارد موقعك و أقصد بموارد هي الصور و السكريبتات و ال Stylesheets فعبر فتح ملف Frames يمكنك أن تشاهد الصور والسكريبتات و ال Stylesheets الخاصة بأي موقع أو مدونة  نافذة console  وهي وحدة تحكم المدونة أو الموقع يمكنك القاء أوامر للموقع أعطيك مثال على ذالك تلك الخدع التي تراها في الفيسبوك عن طريقة اختراق أي حساب أو فتح كامرا أي شخص ... فتلك الخدع تعمل بواسطة console وتلقي أوامر

كود Html تكبير الصورة بمرور الماوس عليها

السلام عليكم و رحمة الله وبراكته HTML اليوم أردت أن أقدم لكم اضافة لمدوناتكم و هي عبارة عن كود و هدا الكود يقوم بتكبير صورة بطريقة جميلة وبمجرد مرور الماوس عليها معاينة مرر الماوس على هده الصورة  تكبير الصورة بمرور الماوس عليها Htmlكود   تكبير الصورة بمرور الماوس عليها < image src = "رابط الصورة"  onmouseover = "this.height='300';this.width='300'"   onmouseout = "this.height='200';this.width='200'"  height = "200"  width = "200" > الكلمات الدلالية HTML الماوس صورة