• الرئيسية
  • تعرف علي
  • اتفاقية النشر
  • اتصال
  • خدمات
  • تابع خلاصات المدونة

« أيقونة الأعلى – Top – بطريقة اخرى و تقنية جديدة
قائمة جافا سكربت ، متفرعة إلى ثلاث مستويات »
9

الزجاجية + ثلاثية الأبعاد بالفوتشوب فقط

يونيو
16

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

نأخذ عمل جديد و نكتب عليه نصنا ..
مرحلة1
و لنعمل التأثير الزجاجي ، توجد ستايلات جاهزة يمكنك تحميلها و الاعتماد عليها .. لكنني أفضل أن أصنع استايلي الخاص بي الذي يصلح لتصاميم في الألوان و كل شيء ، نختار مستطيل بأداة select و نضع فيه gradient بالون الأبيض – مثلا – - لابد أن يكون على لير جديد – طبقة جديدة -
مرحلة 2
الآن نذهب لطبقة الكتابة و نختار العمل فقط – يعني الكتابة ، و هذا يتم بالضغط على زر ctrl + الضغط بالماوس على الطبقة المراد اختيار أبعادها ، النتيجة :
مرحلة,4
نعمل عليها – بالضغط علىالزر الأيمن – inverse select ، حتى نختار المحيط الخارجي للكتابة :
مرحلة 5
الآن نرجع للير الخاص بال gradient الذي عملنا ، و نمسح الجزء الذي اخترناه ، وهو الجزء الخارجي على الكتابة ، بعدها نغير opacity التابعة له إلى 30% او ما يلائمك ، فتكون النتيجة هكذا :
مرحلة 6
نعمل الآن نسخة جديدة من نفس العمل الكلي ، و ذلك بعمل duplicate layer ، أو الضغط على ctrl + alt + نجر بالماوس الليرات
مرحلة 7
نختار اللير و نعدل على حجمه و أبعاد بالضغط على ctrl+t و نقلب اللير
مرحلة 8
الآن نقوم بتخفيف opacity اللير المقلوب الى ما يلائمنا
مرحلة 9
الآن نريد ان نمسح من اللير المقلوب من أسفلة ليظهر كأنه واقعي مثل الظل ، الفكرة وهي تحويل الكتابة المقلوبة إلى لير + مسح أسفلها + تغيير opacity الخاصة بها .
- تحويلها الى لير : باختيار أداة الممحاة eraser tool و نضغط في وسط العمل و يعطينا الرسالة التالية :
مرحلة 10
نضغط ok و يتم تحويل الكتابة الى لير عادي ، بعدها نمسح أسفله بنعومة ،
- تغيير ال opacity شيء عادي ،
الآن انتهينا من التأثير الزجاجي .. و نريد ان نضيف الظل ليظهر النص كأنه ثلاثي الأبعاد .
نعمل بأداة select دائرة ، و نختار أداة gradient و نعمل بداخلها تأثير من النوع الدائري مثل الصورة :
مرحلة 12
- بعدها نقوم بتعديل على أبعادها بـ الضغط على ctrl + t .. ثم إزاحة الماوس حتى يصير الشكل هكذا :
مرحلة 13
نضغط ok و بعدها نغير الـ opacity الى قيمة خفيفة،
مرحلة 14
نعمل خلفية background ناعمة .. بالـ gradient .. شيء سهل اظنه .. لتصبح هكذا :
مرحلة 15
إلى الآن تصميمنا جيد .. لكننا نريد الزيادة ،،
نعمل duplicat leyer لطبقة الكتابة التي انا عملت فيها Fez-Soft Blog
مرحلة 16
و نلعب بأبعادها لأننا نريدها كبيرة لتكون خلفية مظببة ، لكن هنا ملاحظة ، هناك خطأ تقريبا الجل يقع فيه ، وهو تغيير الأبعاد يدويا ، وهذا خطأ .. غنما الصحيح أن تغير العرض مثلا يدويا .. ولما تصل للحد الذي تريد ن تاخذ قيمته و تنسخ مثلها في الطول ليتم تغيير الطرف الآخر بنفس النسبة المئوية ، ليكون تصميمك واقعيا : مثال
مرحلة 17
..
نقوم بتغيير الـ opacity لهذا اللير الذي كبرناه .. مع جعله آخر لير بعد الخلفية .. و تكون النتيجة كما أشرنا أولا:
النتيجة :)
آمل أن اكون قد وفقت في الشرح .. مع ان الشرح بالصور يأخذ وقتا .. لكن لو حبذ الإخوة أقوم بالشرح بالفيديو فأبشروا المرة المقبلة و اعذروني هذه المرة ..
و السلام عليكم ورحمة الله وبركاته

انشر هذا المقال
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • MySpace
  • TwitThis
  • Yahoo! Buzz
  • FriendFeed
  • LinkedIn
  • Ping.fm
  • StumbleUpon

هذه التدوينة نُشرت في الثلاثاء, 16 يونيو, 2009 عند 5:02 ص و مصنفة تحت تصنيف Photoshop, Flash, illustrator. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :opacity, ثلاثي أبعاد, زجاجي

    لتكون على علم بآخر المواضيع و المقالات المضافة في fez-soft blog يمكنك الاشترك في :
  • خلاصات المقالات
  • خلاصات التعليقات
  • متابعة الكاتب على twitter
  • القائمة البريدية : بمجرد أن تضع بريدك الالكتروني و تشترك ، سنصلك قائمة بآخر المواضيع المضافة في المدونة تلقائيا إلى بريدك الالكتروني .
متابعة معلومات عن المقال
« أيقونة الأعلى – Top – بطريقة اخرى و تقنية جديدة
قائمة جافا سكربت ، متفرعة إلى ثلاث مستويات »

9 من التعليقات لـ “الزجاجية + ثلاثية الأبعاد بالفوتشوب فقط”

  1. muslem قال:
    16 يونيو 2009 عند 8:56 م

    السلام عليكم مجهود كبير أعانك الله على أعمالك و أنفعنا الله بها لما يحب و يرضاه

    ردرد
  2. مسلم قال:
    19 يونيو 2009 عند 10:06 ص

    السلام عليكم تباركلاه عليك
    ادا تعترت*******فلا تقعد****** بل قم وانطلق****** صعودا نحو القمة

    ردرد
  3. ياسين قال:
    19 يونيو 2009 عند 5:08 م

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

    ردرد
  4. ديزاين سوفت قال:
    19 يونيو 2009 عند 7:34 م

    السلام عليكم ورحمة الله وبركاته
    جزاك الله خيرا أخي الغالي على الجهد الذي تبدله وجعله في ميزان حسناتك ونفع به المسلمين.
    درس ماشاء الله ، انا أعملها بطريقة أخرى ، لكن جربت طريقتك وهي كذلك رائعة ، وهذا تطبيقي ( طبعا سنعمل تطبيق قبل التعليق ^_^ )

    http://i285.photobucket.com/albums/ll63/SARIZON/DesignSoft.jpg

    موفق ~

    في أمان الله

    ردرد
  5. Fez-Soft قال:
    19 يونيو 2009 عند 7:54 م

    شكرا لكم ، و ما شاء الله عليك ديزاين سوفت ..

    ردرد
  6. يوسف بن عبد السلام قال:
    25 يونيو 2009 عند 9:04 ص

    ماشاء الله عليك
    درس مفيد.
    سيظيف لمسات جميلة على تصاميمي

    ردرد
  7. نبيل قال:
    9 يوليو 2009 عند 7:51 ص

    هذا ما ننتظره منك يا مبدع حفظك الله يا أخي محمد

    ردرد
  8. حسن قال:
    20 يوليو 2009 عند 12:06 م

    مشكور

    ردرد
  9. مهند قال:
    5 مارس 2010 عند 7:20 ص

    الف شكر حبيبي

    ردرد

إكتب تعليقك

اضغط هنا لإلغاء الرد.

إذا أردت أن تظهر صورة بجانب اسمك في التعليق ، شارك في خدمة Gravatar .

  • Donate

    إذا أعجبتك المدونة و رأيت أنك قد استفدت منها و تريد أن تدعمني ، يمكنك أن تشتري لي أحد الكتب التي أحتاج قراءتها ، من Amazon .
  • تصنيفات

    • css , xhtml
    • JavaScript
    • Photoshop, Flash, illustrator
    • PHP
    • تطوير
    • عام
  • مواقعي

    • SetCode
    • Fez-Soft Portfolio
    • مدونة محمد شاطر
  • الأرشيف

    • يوليو 2010
    • يونيو 2010
    • أبريل 2010
    • فبراير 2010
    • يناير 2010
    • ديسمبر 2009
    • نوفمبر 2009
    • أكتوبر 2009
    • سبتمبر 2009
    • أغسطس 2009
    • يوليو 2009
    • يونيو 2009
    • مايو 2009
  • كلمات مفتاحية

    alert Application Assembler confirm css div html html4 html5 javascript jquery media opacity PHP prompt screen Top xhtml أفكار إخفاء إظهار استدعاء تأثير ترقيع تسريع تصميم تطبيق تفصيل تنسيق توافق توزيع ثلاثي أبعاد حقوق روابط زجاجي صفحات عميل فكرة قائمة قالب قواعد متفرعة مشاريع مصمم مطور
  • روابط

    • مدونة يزيد

© Fez-Soft Blog

    All right reserved , Theme By Fez-Soft , RSS posts , RSS comments .
  • تعرف علي
  • اتفاقية النشر
  • خدمات
  • اتصال
  • الرئيسية
عن Fez-Soft
mohammed chater مرحبا ، اسمي محمد شاطر ، Mohammed chater , أعرف تحت مسمى Fez-Soft, طالب و مصمم و مطور تطبيقات ، من فاس المغرب . . يمكنك أن تتعرف علي اكثر من هنا ، أو متابعة حسابي على twitter ، ستجد في هذه المدونة دروسا تطويرية للمستوى المتقدم في تصميم الويب ، و البرمجة بالـ JavaScript , يمكنك متابعتها من خلال الخلاصات ، كما يمكنك أن تراسلني من هنا ، لو دعت الضرورة لذلك ، آمل ان يكون وقتك في المدونة لك ، لا عليك .
الأكثر زيارة
  • فضلا .. لا تستعمل Framework css
  • الخطوط العربية : قواعد ، أفكار و حيل
  • SetCode خدمة جديدة تطل على عالم المطورين
  • ترقيعات css ، الجمل الشرطية ، بالتفصيل الممل
  • قائمة أفقية ، مع تحديد title بـ jQuery بطريقة فريدة
  • تطبيقات hover على عناصر text و ليس صور
آخر التعليقات
  • كمال  : السلام عليكم استفسار بسيط واعتقد انه مهم ومفيد ن...
  • صلاح الإمام  : جزاك الله كل خير ع الطرح الرائع...
  • مفيد  : رائع منذ فترة و انا ابحث عن هذه المعلومات...
  • عبدالله  : شكرا لك على جملة النصائح...
  • ندى  : شكراً لك .. ولكن مشاكل الترميز توتر الشخص !...