استخدام الفوتوشوب في تصميم المواقع

لمواقع

201

كاله، كافة ضيف

ھي

ويسة

وب في تصميم الم

12/4/7

ميم بكافة أشكل كامل أي

يضيكفي لبما

ث عنھا ھنا،

رة لتكون ترو

التحريك

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

اللونجة ت الرسماة النصت الرسم األشكالالتحريك المكبرة

ستخدام الفوتوشو

مشق

مواقع

صور والتصمقع، إما بشكل

بو ،كل جزئي

والتي سنتحدث ب الزائر.

ة:

معالجة صور

ا أداة

أدوات أدا

اختياأداة أداة اإل

أد

التعبئة والتدرج أدوات اللطخ وا

درجأدوات التحكم ب أدوات أدامؤشرات

يد ا

اس

وزارة الثقافة / دم

تصميم المو

ت معالجة الصلرئيسية للمو

، أو بشكيرھا

لفوتوشوب، و بسيطة تجذب

وات األساسية

روع بسيط لم

م. رندة بشير / و25 من 1 صفحة

شوب في ت

من خيارات ماھنا الواجھة ال

وغي إعالنات

يھا استخدام ات إلكترونية

مع بعض األدو

لنا على مشر ب.

م وتوشوبالص

ام الفوتوش

يقدم لنا عالمب، ونقصد ھر وأيقونات و

التي يمكن فيصميم إعالنات

ألدوات

ية للبرنامج مع

ات أثناء عملي بسيط وجذا

طبقات

النص

جلسة الرابعة: فو

استخدا

Adobe Phم مواقع الوبصور وأزرار

طلوب.

صميم المواقعل أساسي وتص

اللوحات واأل

اجھة الرئيسي

ض ھذه األدواعالن إلكتروني

لوحة الط

إعدادات

الج –واقع الوب

hotoshop ذلك تصميمالموقع من ص للتصميم المط

مجاالت تصم الصور بشكل

ف بالبرنامج:

كل التالي الو

م بشرح بعضوتصميم إعال،

أثيرات الطبقة

تصميم مو

برنامجبما فيأجزاء جمالية

من أھممعالجة

التعريف

في الشك

وسنقومللموقع،

تأ

لمواقع

201

موقع

، واف

Filte


12/4/7

اإلفالت من م

النقاط والحو

er Shar


مشق

قة السحب وا

ي:

ر في بعض

rpen Sm

اس


.وبة منھا

Op أو بطريق

وإزالة الباقي

طيھا حدة أكثر

mart Sharp


رويسة المطلو

penمن قائمة امج.

خذ جزء منھا

ث يعطيثر بح

pen


وكوالتة

ھا وإنشاء التر

إما بفتحھا م واجھة البرنا

Crop T ألخ

الصورة أكث


دة لموقع شو

نريد معالجتھ

طة فوتوشوب الحاسب إلى

oolة القص

ضيح تفاصيل


تروسية جديد

صورة محددة ن

صورة بواسطة على جھاز

حھا سنأخذ أدا

صھا نريد توض قائمة:

تصميم مو

إنشاء ت

لدينا ص

لفتح الصالصورة

بعد فتح

بعد قصفنأخذ قا

لمواقع

201


12/4/7

:OKضغط


مشق

طلوبة ثم نض

اس


التفاصيل المط


نحصل على ا


عدادات حتى ن


نغير في اإلعد


فذة الظاھرة ن

تصميم مو

في الناف

لمواقع

201

Ima


12/4/7

age Adj


مشق

ustments

اس


Color B

:حمر


خذ قائمة:

Balance

جة اللون األح


ت اللونية، نأخ

نزيد من درج


عض الدرجات

ن أكثر دفئا فن


آلن بإضافة بع

ريدھا أن تكون

تصميم مو

لنقوم اآل

مثال نر

لمواقع

201

على

Ima


12/4/7

تأثيرا كبيرا

age Adj


مشق

لتي تضيف ت

ustments

اس


ھم األدوات ال

Brightn

سب:


وھذه من أھ

ness/Cont

التأثير المناس


كيز األلوان،

trast

نحصل على


إلضاءة وتركي ة:

ظاھرة حتى ن


آلن بعض اإلة، نأخذ قائمة

المؤشرات الظ

تصميم مو

نريد اآلالصورة

نحرك ا

لمواقع

201


12/4/7


مشق

اس


T:


Type Toolص


دام أداة النص


بسيط باستخد


ف اآلن نص

تصميم مو

سنضيف

لمواقع

201

ادات


12/4/7

ح لوحة إعدا

الصورة.


مشق

يد النص نفتح

ي تناسقا مع

اس


Chوبتحديد ،

يعطيالذي ه و


ocolataب

ان الذي نريده


صورة ونكتب لون:

ص إلى المكا


وضع من الص، الحجم، والل

يك نحرك النص


على أي موونختار الخط،

ام أداة التحري

تصميم مو

نضغطالنص و

باستخدا

لمواقع

201

File

وبدقة

سرعة صيغة


12/4/7

Save f

و JPEGمنھا

سركانية تقدير ى اختيار الص


مشق

خذ من قائمة:

for Web

مھا، نختار من

النھائية وإمك تساعدنا على

.

اس


ب للوب، فنأخ

ودقتھا وحجم

حجم الصورة المؤشرات

ف السرعات.


تنسيق مناسب

غة الصورة و

مؤشر إلى حإلنترنت، ھذه

رة على مختلف


ريد حفظھا بت

خيارات لصيغ

فلية اليسرى م المتوفرة لإلأسرع للصور


نر ة الخطوات

لدينا عدة خي

ي الزاوية السفف السرعاتسب لتحميل أ


نتھاء من كافة

فذة الظاھرة .Saveثم

نه يعطينا فيا على مختلفوالحجم المناس

تصميم مو

بعد االن

في النافHigh ث

الحظ أنتحميلھاوالدقة و

لمواقع

201


12/4/7


مشق

طبقات الحقا.

اس


عديل على الط


إلمكانية التعد


اھزة:

PSDبصيغة


تنا الجديدة جا

ف األساسي ب


تكون ترويست

سى حفظ الملف

تصميم مو

وبذلك ت

وال ننس

لمواقع

201

خدام حجم

حجوم


12/4/7

باستخكوالتة، ثم إعداد الح

إلى ح الحقا أي وقت).


مشق

ديد من الشوك النصوص،

بيكسل: 600

ثم تصغيرهلعودة إليه في

اس


ويج لنوع جدجمالية تبرز

x 0 400ثال

بحجم كبيرللع PSDملف


بھدف التروي وتأثيرات ج

أخذ الحجم مث

ى أي تصميم األصلي في م


الن إلكترونيطوط مختلفةعلى الموقع.

File ولنأ

العمل على مااظ بالتصميم

اھز للعمل.


وني

وم بإنشاء إعالصوص بخطنه عناسب مكا

New يد من

األفضل دائمجاتنا واالحتفا

لف الجديد جا


إعالن إلكترو

المثال سنقو وبعض النصب لإلعالن لين

اية ملف جديد

ھنا أنه منتناسب احتياج

لدينا اآلن المل

تصميم مو

إنشاء إ

في ھذاصورةالمناسب

نأخذ بد

(الحظأخرى ت

أصبح ل

لمواقع

201

ضعھا إلى ا ن ھن

مركز


12/4/7

لوبة من موضمع مؤشراتمناسب (يمكنحفاظ على مر


مشق

النقشة المطلوأبعاد معينة مإلى الحجم الم

للح Altوالزر

اس


صورة تمثل فتظھر لنا بأكبر الصورة إعلى األبعاد و


عالن، نأخذ صلف الجديد،

ى الزوايا ونكبSh للحفاظ ع


ى أرضية اإلعلى داخل الملحب من إحدى

hiftعلى زر


ض النقوش إلىب ونسحبھا إلتصغير، نسحب الضغط ع


سنضيف بعضجھاز الحاسب التكبير أو التمن مع السحب

ة في مكانه).

تصميم مو

بداية سعلى جإمكانيةوبالتزامالصورة

لمواقع

201

للون


12/4/7

دات الخط وال


مشق

نختار إعداد

اس


شروع األول


المشكما في و


ون لإلعالن،


بسيط كعنوان


اآلن نص ب م.

تصميم مو

نضيفوالحجم

لمواقع

201

لعديد سافة

أكثر

من نفس


12/4/7

نافذة تضم الإعدادات المس

وترويجب

بتحديد جزءق فيواللص


مشق

فتظھر fxة ، نغير إظل

المناسب.

عامل جذبة

تقوموالتي ومع النسخ و

.سية)

اس


أثيرات الطبقةD إلضافة ظ

ل على الظل

منھا إضافة

Rectangu،لمختارةة ا

الطبقة األساس


ط على زر تأDrop Shad

S حتى نحصل

ة نريدة سائل

ular Marqصورةل من البحذف ا لباقي


نص، نضغطdow منھا

Sizeوالحجم

تةشوكوال ثل

quee Tool القسم األول

ونحذف الب(ه


يرات على الن، نختارراتSpreadار

رسومية تمثل .إلعالن

األولى حديدطيل، ونحدد الذي اخترناه


بعض التأثيف يارات التأثير

Dist واالنتشا

آلن صورةأعلى اإلفي ھا

وال أداة التحة بشكل مستط يظھر الجزء

تصميم مو

فنضيلمن خيtance

اآلنأخذ ونضعھ

أونأخذ الصورةالمكان

لمواقع

201

خرى ات ح

ھا.


12/4/7

أداة تحديد أخ باختيار مساحضاء الختيار


مشق

نأخذ لسائلة،ة أنھا تقوم

المساحة البيض

اس


الشوكوالتة الاألدا زة ھذه

فنضغط على


حتفاظ فقط باMagic وميز

ن ودرجته، ف


للصورة واالc Wand Toناء على اللون


لفية البيضاء لoolلسحرية

بنقرة واحدة بن


ريد إزالة الخللتحديد الداة ا

من الصورة بن

تصميم مو

نراآلن أدوھي كاملة م

لمواقع

201

وضة


12/4/7

كوالتة المعرو


مشق

ي قطع الشوكو .Openل

اس


بيضاء.

إلعالن.

إلعالن وھيمج من خاللا


ل المساحة الب

ة في أعلى اإل

ع األساسي لإلل على البرنا


D حذف كاملل

صورة الناتجة

مثل الموضوعھا بشكل مستقل


Deleteضغط

ريك نثبت الص

فة صورة تمث ونقوم بفتحھا


ام التحديد نض

أداة التحرخدام

التالية إضافة نختار صورة

تصميم مو

إتمابعد

وباستخ

الخطوةللبيع، ن

لمواقع

201

لكن ة في تحكم Poly

صورة


12/4/7

سابقة،ة الصورض الصعوبةضيال في التygonal Lasخارجية للص


مشق

قمنا في الصويؤدي إلى بعض

واألكثر تفض ssoوھي )

ى الحواف الخ

اس


البيضاء كما، والذي قد يل

وات التحديدن ذلك بكثير)بالضغط على

. الصورة


ديد المساحة اي يمثل الظل

من أدر دقةكثر تعقيدا من

التحديد باطالمطلوبة من


لسحرية وتحدالذيالرمادي

األداة األكثرجھنا صور أك

نقات وتثبي نوي المساحة ا


أداة التحديد الاللونمن ت

لك سنختاراجور (قد توعينئھا على ت

ضلع معقد يحو


ھنا اختيار أا ت وجود درجا بالتحديد، لذلف أنواع الصو تعتمد بمبدئھ

، لتمثل مضبة

تصميم مو

بإمكاننانالحظالتحكمبمختلفTool،المطلوب

لمواقع

201

Fea ، شاذة


12/4/7

atherقائمة نقاط ش وأحادة


مشق

ونختار من القھر حواف حا

اس


حة المحدد و حتى ال تظھ


ي على المساححة المختارة


بالزر اليمينيحواف المساح


حديد نضغط نعومة على ح.ص الصورة


اء من التحنتھضيف تميزة قص دعن حواف

تصميم مو

االنبعد ھذه المعلى الح

لمواقع

201

لرقم

ظ في ھذه ضغط


12/4/7

يكون ا غالبا

، نالحظصورةن الھدف منية وذلك بالض

خلفية.


مشق

مھا صغير غ

نلصق الص اوبما أنجديدة،

ن طبقة الخلفيمع شفافية الخ

اس


ي يكون حجم

ف جديد تماماة الصورة الج

عن اإلظھارعلى الصورة م


والتي المرئية

خ وعلى ملفBack وطبقةخاصيةنزيل

ة، فنحصل عل


سبة للصور مثال. 3ا

م اآلن بالنسخkgroundية

ندون خلفية،بجانب الطبقة


لكن بالنس ،ده، سنختار ھنا

المثالي، نقومن: طبقة الخلفيظ بالصورة دل شكل عين ب


أي رقم نريد،5و 2ل بين

من التحديد ا الناتج طبقتين ھي االحتفاظ

يمثل زر الذي

تصميم مو

أختار نالمفضل

انتھيناالملف االعمليةعلى الز

لمواقع

201

دور P مع


12/4/7

قة، ھنا يأتيPNG‐24غة


مشق

خدامات الحقنختار الصيغ

اس


الشفافية الستخSave for W


مع االصورةWebة، فمنSave.


نحتفظ باحيثالمطلوبةافية

eت ثم نضغط


ف الجديد بح تحتفظ بالشفاقية اإلعدادات


آلن حفظ الملفالتي PNGة

ظ بالحجم وبق

تصميم مو

اآلنريد الصيغةاالحتفاظ

لمواقع

201

طريقة

حتوى رجية على


12/4/7

ة بسھولة بطر

مثال.

عبرة عن محإلضاءة الخار ماذا يحدث


مشق

ع الشوكوالتة

Drop Shad

األخرى المعخرى مثل اإلرات وشاھد

اس


ة صورة قطع

dowذ الظل

ض النصوص وتأثيرات أخمختلف التأثير


نا اآلن إضافة

ض التأثير فنأخذ

لنضيف بعض،جوم مختلفةھنا بنفسك م


صبح بإمكانن ف.

ضيف بعضن

،لنص األول وألوان وحج

St جرب ھ)


عالن، أصف اإلى داخل الملف

ن المناسب ن

ي أنشأنا بھا الطوط متنوعة

rokeإلطار


آلن إلى ملف واإلفالت إلى

يتھا في المكان

نفسھا التيقة ن بأنواع خط

Outer واإل.

تصميم مو

النعود السحب

تثبيبعد

بالطريقاإلعالنGlowالنص).

لمواقع

201

من رض


12/4/7

بداخله، نأخذى كامل العر

.Fillئة


مشق

ت االتصال ب مستطيل على

ار لون التعبئة

اس


كتابة معلوماتل اإلعالن

ط القوائم نختا


ى اإلعالن لكرسم في أسفل

وأسفل شريط


ر سفلي علىRectaونر ،

افذة البرنامج


إضافة إطار ngle Tool

ت في أعلى نا


األخيرة ھي ل المستطيل ع مناسب.

يط اإلعدادات

تصميم مو

اللمسةاألشكالوبارتفاع

رشمن

لمواقع

201

الحظ تمكن ضمان


12/4/7

ج اللوحة نالEyوذلك لنت (

الن وذلك لض


مشق

المؤشر خار yedropperناصر اإلعال

اس


بتحريكو، نr Toolاللون

في بقية عن .OKضغط


ختيار األلواناأداة اختيار ت الموجودة مناسب ونض


ظھر لوحة اخمماثل لشكل(

وان والدرجاتتار لون فنخ


الملون تظبعشكل قطارة (يب من األلوان وتناسقھا،


على المربط لمؤشر إلى شتيار لون قرية تمازج األلو

تصميم مو

بالضغطتحول امن اختخاصية

لمواقع

201

ناتجة


12/4/7

م الصورة النا


مشق

طيل.

تصغير حجم

اس


ھا فوق المستط

Save f مع


تصال ونثبتھ

or Webمن


معلومات اال

م JPEGيغة


النھائي وھي

بصيالصورة .كسل مثال


اآلن النص ا

خرى نحفظ ابيك 250رض

تصميم مو

نضيف

أخومرة عرإلى

لمواقع

201


12/4/7


مشق

اس

وزارة الثقافة / دم م. رندة بشير / و

25 من 24 صفحةم وتوشوب

الص

.


جاھز للنشر


يكون إعالننا

تصميم مو

يوبذلك

استخدام الفوتوشوب في تصميم المواقع

12/4/2017 م. رندة بشير / وزارة الثقافة / دمشق الجلسة الرابعة: فوتوشوب –تصميم مواقع الوب 25 من 25 الصفحة

للعودة إليه في أي وقت إذا احتجنا إلى التعديل عليه. PSDننسى حفظ الملف األساسي بصيغة وال

والصور المطبوعة(اإللكترونية) حول الفرق بين الصور المرئية مالحظات

عن الصور المرئية، أھم ھذه اللوني طھانمدقتھا وحجمھا وكثيرا الصور المطبوعة في تختلف والتي عند إنشاء ملف جديد يجب تعديلھا بشكل يدوي: ،الفروقات

بوعةالمط المرئية in أو إنش cmسم Pixel بيكسل قياس الحجموحدة

RGB اللونيالنمط (Red – Green – Blue)

CMYK (Cyan – Magenta – Yellow – Black)

(ال نحتاج االفتراضية المثلىالدقة لتغييرھا)

أو متريبيكسل في السنت 120 بيكسل في اإلنش 300

بايت (يجب أن ال بالكيلو الملف النھائيحجم ميغا بايت) 1يتجاوز

غيغا بايت 1يصل إلى قد وأكثر

سرعة صغر حجم الصورة وبالتالي من ھذه الفروق أنه في الصور المرئية ھدفنا ھو الھدف ، أما في الصور المطبوعة الھدف ھو دقة الطباعة وبألوان تتوافق مع ألوان الحبر المستخدم ھالتحمي

.CMYKفي كافة الطابعات وھو نظام اللون

استخدام الفوتوشوب في تصميم المواقع

Design