صمم موقعك عن طريق فوتوشوب وأصدقائه

[casper2002]

درس مترجم من موقع فوتوشوب كافي الانجليزي .. وهو درس شيق احببت ان اترجمه واطرحهه عليكم

===============================
اغلب الناس عندهم خلفيات ششاشاتهم 800*600 فعليك ان تفعل هكذا ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two001.gif
===============================
اممم الحين نقسم التصميم حسب .. رغبتك .. guides
هذه الخطوط الزرقاء تقدر تحطها .. عن طريق
guides < view
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two002.gif
===============================
الآن انشأ layers جديد ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two003.gif
================================
الان .. انشأ اي تدرج تحبه انت او مثل ما هو محطوط ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two004.gif
===============================
الان .. امسك ال Shift ونزل لي تحت بالماوس علشان يصير التدرج معاك مثل هذا ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two005.jpg
================================
الحين .. حط اي صورة او صورة القرش الموجودة وتقدر تنزلها من هنا (http://www.photoshopcafe.com/tutorials/super%20tutorial%202/shark.jpg)
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two006.jpg
================================
طبعا الحين راح نحط ماسك على الصورة والماسك هو ثاني ختيار من اليسار من الي تحت الي يمه حرف الـ F ..


http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two007.gif
===================================
الحين .. راح نسوي فرشه حجمها 100 وتكون حوافها ناعمة .. مثل هذي ..


http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two008.gif
===================================
الحين شيء سهل انك تزيل الحواف للصورة بهذه الاداة .. طبعا اتكون مأشر على الماسك الي سويناه .. واختار اللون الاسود .. وامسج واذا اخطأت اختار الابيض ورد ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two009.jpg
===================================
راح يصير معانا هذا الشكل ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two010.jpg
===================================
الحين قلل القيمه الى 46% اذا تبي .. اكثر اقل حسب نظرتك ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two011.gif
===================================
الشكل النهائي ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two012.jpg

[casper2002]

الان الدرس الثاني وهو لشرح الاضافات بدأنا بالجد ..

==========
اول شيء تحتاج الى اسم الموقع او شعارك او اي شيء تبيه يكون امامك .. طبعا عقب ما تكتب ضعه بالمكان لمخصص له كما سوف ترى .. عن طريق ضغط Ctrl + t وتحريكه وتضبيطه .. بفضل اختيرا خط نظيف ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two013.jpg
الآن .. ضع شعارك الذي يمكنك عمله بكل سهولة ..
سو مربع عادي .. وقطع اطرافه .. بالطريقه الي تريحك .. وبعدين حط داخله حرف او شعار بعدين حرك المربع ليكون بالشكل هذا يعني 45درجه بس مو اكثر .. لوضعه بالشكل المطلوب وسوف تكتشفه بعدين .. شايف الجايد الي حطيناهم قبل .. حطه عليهل بالشكل هذا ..


http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two014.gif
=========
الحين انشأ لير جديد سمه lines ...
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two015.gif
========
الحين اختار اداة التحديد العامودية ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two016.gif
==========
حدد على يمين ويسار الكلمة الي حطيناها .. بالشكل هذا ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two017.gif
==========
الحين امسح الخطوط الي راحت صوب الشعار بالشكل هذا ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two018.gif
==========
لتكون بهذا الشكل ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two019.gif
=========
الحين بالاستعانه بالجايدز الي حطيناهم اول خطوات .. حدد المساحه المستطيله الي صارت بالوسط .. ولونها باللون الي تبيه ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two020.gif
=========
الحين .. اكتب فيها بأشكال متباعده الي تبي تسوي له وصلات .. طبعا مو تكتب تحته فقط اكتب فوقه وفيه نفس الشكل التالي ..


http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two021.gif
==========
الحين اخفي الجايدز . عن طريق ضغط Crtl + '
للعلم هذا (( ' )) موجود مكان حرف الطاء بالعربي
ليتكون لنا هذا الشكل ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two023.jpg
==========

انتهى الدرس الثاني .. وهو لمعالجة الاشياء .. 2

[casper2002]

احم احم .. الدرس الثالث سهل وما يبي له شيء اصلا .. لانك راح تضيف اشكال لتميز الوصلات

=====
هذه القائمة اختار منها اي واحد ..


http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two024.gif
====
شكل التايل الي تبيه انت بنفسك .. ترى سهله ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two025.gif
=====
طبعا هذاالشكل راح يطلع لنا لما نحط الماوس على الكلمه ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two026.jpg
=====
الحين ننسخ هذا الستايل عن طريق الضغط بالماوس يمين .. وفعل هذه الفعله
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two028.gif
=====
الحين روح على الثانيين .. وسو هالحركه .. بالماوس يمين بعدين اختار .
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two029.gif
====
هذا الشكل الي المفروض يتكون لديك ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two030.gif
=======
بس اقولك شغلة طف الحركة مالت الستايل لاننا الحين راح نروح الايميج ردي ونسوي حركة الماوس الممرر ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two031.gif
مشكووورين على المتابعه

[casper2002]

الدرس هذا انا اسميه تشريح .. نفس الاحياء والطب ..

========
الحين راح نتحول للإيميج ردي من الفوتوشوب اي نعم من الفوتوشوب وهي سهلة ..
http://www.photoshopcafe.com/tutorials/rollovers/switch-to-imageready.gif
========
الحين راح يرد ال guides بروحه .. او احنا نرده بكل سهوله .
ونروح الى optimization
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two033.gif
========
الحين شوف القائمة هذي فوق واختار نفس الخيارات ...
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two034.gif =========
الحين نختار اداة التقطيع ..
ادري بتقولون ليش ما قطعنا بالفوتوشوب اقولكم اننا نحتاج للوقت .. وافهموا
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two035.gif
========
الحين نقطع الاماكن مثل الاسم و اماكن الازرار .. وهالسوالف .. طبعا بالزاوية راح نشوف ارقام هذي ارقام القطع .. وكلما الصورة قطعت كان افضل لنزولها على النت ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two036.jpg
طبعا بتقول ليش حسين قاعد يقولنا قطعوا وسووا هالسالفه ..
1- نقدر نسوي حركة بالمكان الي قطعناه ..
2- سرعة التنزيل والكثير ...

=========
الحين اقعد قصص مكان الازرار ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two037.gif
=========
احم احم .. هذا الشكل الي يطلع لك ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two038.jpg
انتهى درس التشريح .. 3

[casper2002]

الان الرول اوفر .. حركة الماوس ..

======

اختار اداة التحديد والقص الثانية ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two039.gif
======
الحين اختار اي منهم .ز واضغط مرتين بسرعه ..
راح تطلع لنا هذه القائمة .. اختار منها الرول اوفر وبطل لير جديد فيها ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two041.gif
======
الحين عقب ما تسوي هالحركه روح على الليرات وشغل الستايل الي طفيناه ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two043.gif =====
الحين السالفه سهلة .. شوف شنو راح يصير عندنا ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two044.gif
======
الحين روح على الخيار الاخير وطبق هذا .. ولا تنسى انك تربط بوصلات صحيحة .. مكن ال URL لازم تحط شيء موجود ومصممي الصفحات يعرفون هالشلغه ...
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two045.gif
======
وطبق على الباجي نفس الشيء بالنسبة للأزرار .. لكن مو تنسى ..
الوصلة تكون غير .. الا اذا انت تبي نفسها ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two046.gif
======

انتهى هذا الدرس .. 4

[casper2002]

الضغط للموقع ...

الحين هذه الخطوة من الخطوات المهمه ..

=========
اختار اي شريحه وطبق عليها لاننها راح نطبق على الكل ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two054.gif
=========
شوف هذه الخصائص بالقامة القديمه ذاا تذكرونها
شوفوا كل مكان وياخذ طريقه يعني المكان الي ما يحتاج وايد الوان خله 4 الوان فقط والي يحتاج الى الكثير 128 الى فوق ارجو منكم فهم هذه النقطه جيدا
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two055.gif
=========
الحين روة قائمة File
بعدين priview in
واختار المتصف لديك وشوف العمل الي قمت به

=========
تأكد من جودة العمل ..
روح احفظه ..
File>Save optimized as

http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two061.gif
=========
ركز على نمط الحفظ وهو الامج والاتش تي ام ال ...
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two062.gif
هذه الاشياء الي راح تشوفها .. بالمكان الي حفظته فيها ..
ولا تنى حفظ العمل بالصيغه الاساسية PSD اوكي



http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two063.gif
انتهى درس اليوم و العصر او غدا درس النشر بالدريم ويفر 4 اوكي

[casper2002]

تكلمة الدرس بالدريم ويفر ..
=====

اول ما نحتاجه هو فتح السايت بالدريم ويفر بعد تكملته بالفوتوشوب ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two064.gif
روح .. Site>Define Sites

=====

اضغط الآن على New .. وهذا سف يكون موقعك الجديد ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two065.gif
=====

الحين عبئ البيانات .. وسم الوقع وحطه مكانه بكمبيوترك ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two066.gif
=====

راح يقولك اختار مكان الملف .. اختاره مع ملفات ال Html+gif الي سويناها .. سابقا اوكي ..

http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two067.gif
=====

الحين راح نتأكد انه تم حفظ الملف خلاص ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two068.gif
اضغط Done خلاص بعد اختيار اسمه ..

=====

الحين لما تفتح راح يفتح لك الصفحة الي انت سويتها بالسابق طبعا تكون كامله بكل شيء اوكي ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two073.jpg
=====

الان تفك حزام الامان ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two074.gif
=====

الان .. نريد ان نزيل الهواش الي على اليسار وفوق كي تلصق الصفحة بالمتصفح .. اوكي


http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two075.gif
واذا مالك خلق تسوي كل هذا اضغط .. Ctrl+J
وحط 0 انش ..

=====

الحين راح يطلع لك هذا الشكل .. وخل نحط الخلفيه للصفحه ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two076.jpg
=====

http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two077.gif
او اضغط على الخليفه بالماوس يمين .. وغير الخلفيه

=====

الحين اختار لون الخلفيه ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two078.gif
=====
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two079.jpg
اضغط F12 .. حتى تشوف موقعك على المتصفج ..
=====

البقيه تأتي ..

[casper2002]

الحين ..

حدد الي بالنص .. وشيله بالطريقه الي جدامك
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two080.gif
يم SCR هذا موقع الصوره الي بالنص .. اوكي انسخها .. وحطها بأي مكان او احفظ المكان الي طلع لك .. اوكي

========

الحين اضغط Del راح يطلع لك الشكل هذا ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two081.gif ========

الحين شفتوا الصور الي حذفناها .. راح نخليها خلفيه ..
اهي كانت صوره كامله للمعالجه وما نقدر نكتب فوقها ..

http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two081.gif
روحوا على Tool bar يعني .. شريط المهام ..
تلقون الصوره الي فوقكم .. اختارو صور الملف الصغير ..

=======

تذكرون اول خطوة وهي قلت لكم حفظوا هذا الشيء ..
راح نطلع منه الصوره الي اهي خلفيه

http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two083.gif
======

الحين يطلع لنا الشكل هذا ..
اكو ناس ..
بتقول كاسبر البطل الحين ليش سوى هالحركه !! انا اقولكم انه لازم نسوي هالحركه علشان نقدر نكتب على صفحة الموقع
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two084.gif ======

الين خلاص .. تقدر تضيف كلام او صور عادي كأنه موقع عادي قاعد تبنيه ..
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/super-two085.gif
======

الحين اضغط F12 واعرف انت شنو سويت

======
بعدها اضغط Save As واحفظ الملف باي اسم وصعده على موقعك وشوفه شغله صحيح ولا لا .. ؟!؟

======
ومشكوورين على المتابعة أرجو أن يكون الشرح قدنال إعجابكم
أخوكم كاسبر
تحياتي للجميع

[casper2002]

مثال أخر عن تطبيق الدرس
http://www.fatayat.net/homework.jpg
تحياتي

[الحنفى(القديم)]

رائع جدا جدا أخى كاسبر000
نتمنى منك ترجمة المزيد من هذه الدروس الإنجليزية00
الرائعة مثلك00;)
أخوك/الحنفى

[Mr.something]

رائع جدا جدا

و مشكور ألف ألف شكر
و الرجاء وضع المزيد منها

لأنها مفيده جدا

الف شكرا


عضو مميز من جد :D