المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة جرافكس تصميم الموقع. الدرس(3/4): طريقة تقطيع التصميم بالفوتوشوب.



م.صالح
16-May-2008, 05:38
سيتم في هذا الدرس شرح طريقة تقطيع (تشريح) التصميم على الفوتوشوب حتى نتمكن من استخدام تلك الصور في تصميم الموقع.
وتعرفنا فيما سبق كيف نقوم بتخطيط التصميم، طبعاً نحتاج إلى أن نخطط كل التصميم وليس جزءاً منه فقط ..


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/plan.jpg

سنتعرف في البداية على الأدوات التي تهمنا فقط من أدوات برنامج الفوتوشوب، وهي أداة التقطيع التشريح (Slice Tool)، وأداة العدسة.


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/PSD_tools.jpg

دعونا نفتح صفحة جديدة في الفوتوشوب عن طريق File --> New ثم نختار الخصائص التالية .. وهي خصائص تصميم موقع.. ثم OK أو موافق.


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/page_setting.gif

نختار أداة التقطيع يتحول شكل مؤشر الفأرة إلى صورة سكين.

نقوم بالضغط على زر الفأرة الأيسر باستمرار مع التحريك في أي جهة لنقطع مربع .. سيظهر معنا الشكل التالي:


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/slice02.gif

كما يتضح من الصورة السابقة أنه ظهر لدينا نوعين من الشرائح:
طبعاً نلاحظ وجود رقم ورموز في الركن الأيسر العلوي من كل شريحة.. فالرقم يدل على رقم الشريحة.
والرمز يدل على نوع الشريحة.. ولدينا هنا نوعين للشرائح:
الشريحة المقطوعة رقم (3)، وهي التي قمنا بقصها. وهذه يمكن التحكم فيها عن طريق أداة التحديد والتعديل.
وشرائح أخرى تلقائية رقم (1،2،4،5)، وهذه لا يمكن التحكم فيها ولا نحتاج إليها.

والآن سنقوم بالتطبيق العملي لما تعلمناه على الموقع الذي قمنا بتخطيطه في الدرس السابق. وبإمكان من يرغب في التطبيق معنا أن يحمل الملف من الرابط التالي:

لتحميل ملف التصميم بصيغة الفوتوشوب (http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/Sample.zip)

سنقوم بفتح الملف ثم نختار أداة التقطيع (السكينة). ثم نقوم بقطع الصورة التي في الركن الأيسر العلوي فيظهر معنا الشكل التالي:


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/slice03.gif

جميل جدا ..

الآن سنقوم بقطع خلفية رأس الصفحة كما هو مخطط.


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/slice04.gif

نلاحظ أن العرض صغير جداُ ..

أترك لكم تقطيع باقي الصور ..

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

الآن جاء دور أداة (العدسة) ولنقوم بتكبير المنطقة السفلى للشريحة رقم (1) إلى أكبر قدر ممكن ..
ملاحظة: إذا كبرت التصميم عن طريق العدسة وأضعت مكانك فاختر أداة العدسة ثم انقر في أي مكان من التصميم بزر الفأرة الأيمن تظهر لك القائمة التالية.


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/PSD_ZoomMenu.gif

اختر منها الحجم الحقيقي Actual Pixels أو ضبط على الشاشة Fit on screen.

انظر أن القص لم يكن دقيقاً..


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/slice-05.gif

الآن جاء دور استخدام أداة التحديد والتعديل.
نحتاج إلى تعديل أماكن القطع كما يلي:


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson3/slice-06.gif

وهكذا بقية الصور والخلفيات...

والآن.. انتهينا من تقطيع التصميم .. وفي الدرس القادم سنتعرف على طرق حفظ هذه الصور المقطعة.

احمد حسن
17-May-2008, 12:40
اخي المهندس صالح هاقد اتقنت الدروس الثلاث وبانتظار درسك الاخير اخي
وحاب اصل الى مرحلة تصميم موقع تطوعي فياليت اقدر اخدمكم

م.صالح
17-May-2008, 07:48
جميل أن الفكرة واضحة .. ومن لديه إي إشكال فليسأل ..
وبإذن الله ستصل أخي الكريم .. وتصبح أحد الأعضاء الفاعلين في هذا المشروع ..

درب الخير
17-May-2008, 10:41
السلام عليكم .... أخي الفاضل م.صالح

لقد قمت بتطبيق جميع الخطوات الموجودة في هذا الدرس .

1- لاحظت أن بعد كل عملية تعديل للقطع تمت في الدرس كان خط القطع يأخذ مساحة زائدة عن الصورة.... لماذا يا ترى !!؟؟
2- بالنسبة لبرنامج الفوتوشوب ما هو رقم الإصدار الذي تعمل عليه أو الذي تنصحنا بتثبيته ؟

تحياتي

Spirit flower
19-May-2008, 05:26
السلام عليكم

أحب اشيد بالجهود الكبيرة و المتميزة

الله يجزاكم خير : )

يحي القاضي
19-May-2008, 10:08
يعطيكم الف عافيه على المجهودات الرائعة ،،،،


اللهم وفق الجميع لما فيه الخير والسداد

م.صالح
19-May-2008, 08:43
السلام عليكم .... أخي الفاضل م.صالح

لقد قمت بتطبيق جميع الخطوات الموجودة في هذا الدرس .

1- لاحظت أن بعد كل عملية تعديل للقطع تمت في الدرس كان خط القطع يأخذ مساحة زائدة عن الصورة.... لماذا يا ترى !!؟؟
2- بالنسبة لبرنامج الفوتوشوب ما هو رقم الإصدار الذي تعمل عليه أو الذي تنصحنا بتثبيته ؟

تحياتي

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

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

وبالنسبة لبرنامج الفوتوشوب فالإصدارات الحديثة دعمها لتصميم الويب أفضل .. وعن نفسي أستخدم الإصدار السابع 7 ME ولكن الإصدارات التي تليه تدعم الويب جربت الإصدار CS1 وليس بينه وبين هذا الإصدار فرق كبير في مجال تصميم الويب، ولكن به نقلة كبيرة في مجال المونتاج .. واطلع بعد على الإصدارين CS2 و CS3 ..

أتمنى أن أكون قد أجبت على سؤالك .. وأعتذر عن تأخر الرد..

م.صالح
19-May-2008, 08:48
السلام عليكم

أحب اشيد بالجهود الكبيرة و المتميزة

الله يجزاكم خير : )

وعليكم السلام .. أشكر لك هذه العبارات الإيجابية ونفع اللع بك..



يعطيكم الف عافيه على المجهودات الرائعة ،،،،


اللهم وفق الجميع لما فيه الخير والسداد

أشكر لك هذا الدعم المعنوي .. وأسأل الله لك التوفيق والسداد ..

درب الخير
20-May-2008, 03:13
أتمنى أن أكون قد أجبت على سؤالك .. وأعتذر عن تأخر الرد..

كفّيت و وفّيت أخي الكريم ، لك جزيل الشكر على الرد .
تم مراجعة الدرس بعد التعديل ........ خذ وقتك كفاية فنحن نقدر مشاغلك .

إبراهيم المطرفي
24-May-2008, 12:37
جزاك الله خيرا م.صالح

متابع بس عندي سؤال ..

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

م.صالح
25-May-2008, 04:33
أخي إبراهيم ..

ومن السؤال يتضح أن لديك خبرة جيدة في هذا المجال .. وما ذكرته صحيح ..

ولقد قمت باختيار القطعة هنا لما يلي:

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


أتمنى أن أكون قد أجبت على الاستفسار..

نفع الله بك ..

إبراهيم المطرفي
25-May-2008, 01:20
جزاك الله خيرا

إجابة واضحة وشافية .

في رعاية الله

butterfly*02
25-May-2008, 03:17
يوووووووه ما بغت على الله تزبط معاي شوي واتقطع معاها:icon15:
طيب الحين قطعناها وعدلنا التقطيع على رأس الصفحة هو ذا اللي مطلوب لهذا الدرس بس صح ؟؟

يعطيك ألف عافية اخوي المهندس صالح

م.صالح
27-May-2008, 03:59
إنجاز طيب أنك نجحت في إتمام عملية التقطيع.. وهي أهم عملية في هذه الدورة..
بعد هذه العملية بقي فقط طريقة حفظ الشرائح وإعدادات الحفظ في الدرس الذي يلي هذا الدرس.

صفاء عربش
31-May-2008, 07:09
شكرا الك بس عندي سؤال بسيط الدرس الرابع وين او امتى حينزل عالنت وشكرا

م.صالح
31-May-2008, 09:03
الدرس الرابع نزل منذ أسبوع وهذا الرابط:

http://www.arabvolunteering.org/corner/avt13322.html


ولقد بدأت الدورة الثانية والتي هي عن تصميم المواقع من خلال الفرونت بيج.
http://www.arabvolunteering.org/corner/avt13522.html

وأشكر لك متابعتك وحرصك ..
نفع الله بك.

غريب_21
18-Jun-2008, 05:05
الله يجزاكم خير .. تأخرت كثيراً عليكم ..

بإذن الله اكمل ما بدأته معكم .. :)

م.صالح
20-Jun-2008, 04:37
أهلا بك أخي الكريم ...

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

وفي حفظ الله

سعد السعد
23-Jun-2008, 11:04
صراحة جهد جبااااار جدا ..

وخطوات جدا ثابته ومفيده

أثابك الباري