موضوع: تصميم المواقع ببرنامج الفوتوشوب (1)

ردود: 6 | زيارات: 690
  1. #1

    تصميم المواقع ببرنامج الفوتوشوب (1)

    هذا الدرس سيقسّم إلى ثلاثة أقسام ، وسيتم إنشاء موقع ويب على 3 مراحل ، وهي كالتالي :
    - التصميم بواسطة الفوتوشوب .
    - التقطيع بواسطة الإيميج ردي " أو الفوتوشوب نفسه "
    - التحرير والترتيب و " الفبركة " بواسطة الفرونت بيج .
    قبل الشروع في الدرس تأكد أن لديك كلا ً من البرنامجين التاليين :
    أدوبي فوتوشوب (5.5 ، 6 )
    فرونت بيج XP
    ---------------------------------------------------------------------------------
    أولا : الفوتوشوب
    ----
    1- قم بإنشاء ملف جديد ، قياساته كالتالي :
    عرض : 780 (( أنت ملزم بهذا القياس لشاشات 800 / 600 )) وهو الأفضل
    طول : 438 (( يختلف هذا القياس باختلاف طول الصفحة ، فإذت كانت الصفحة طويلة " دليل مواقع أو صفحة
    داخلية مثلا ً " فسيكون القياس طويل ، أما إذا كانت صفحة مقدمة " واجهة " فأنصحك بهذا القياس ))
    دقة : 50 (( مناسبة لمثل هذه التصاميم ولتصاميم ويب عموما ً ))
    وكل هذه الخطوات مبينة في الشكل المجاور .
    http://www.mazoo.com/html/images/web-tut-1.gif
    -------
    الآن بعد عملية انشاء الملف تأتيك صفحة بيضاء خاوية ، فمالعمل ؟!
    يجب على المصمم التفريق بين صفحات ويب والتصاميم العادية (( نقطة مهمة جدا ً ))
    ففي الإنترنت (( ولا سيما انترنتنّا )) هناك مسألة التحميل والسحب من الخادم صور الموقع ونصوصه ، لذلك
    وجب عليك أن تنتبه لهذه النقطة وعليه ، اتبع التالي :
    -------
    2- حاول ابقاء مكان أبيض فارغ للنص (( لا أنصحك بكتابة النص بالفوتوشوب لأنه سيتعامل معه على أساس أنه
    صورة وهذا قد يأخذ وقتا ً أكثر من النص العادي )) لأننا سنقوم لاحقا بقص الفراغ هذا وكتابة النص المطلوب
    مكانه .. وهنا في الشكل المجاور مثال يبين المقصود .
    http://www.mazoo.com/html/images/web-tut-2.gif
    -----
    3-الإسهاب في الألوان وكثرتها قد يتعبك ، إذا كنت تريد موقع ويب سريع التحميل مميز وممتاز .. (( من ناحية
    الألوان فدع الفوتوشوب نفسه يتولى هذه العملية )) يمكنك اختيار لوح ألوان " خاص للويب " وذلك كما هو مبين
    لك في الشكل .
    http://www.mazoo.com/html/images/web-tut-3.gif
    -----
    4-حاول أن تكون خلفية العمل عندك خلفية بلون واحد ، أو خلفية يسهل " على برنامج الفرونت بيج تكرارها
    بدون تأثر للخلفية " ... =|| سنقوم بإفراد درس كامل إن شاء الله تعالى عن الخلفيات والأزرار لصفحات ويب
    =|| ، والسبب في ذلك هو أننا أحيانا ً يمكننا أن نستغني عن صور ليس لها داعي في العمل فنقوم بحذفها " أزلنا
    صورة " واستبدالها بخلفية كاملة لصفحة الإنترنت " استبدلناها بلون "
    --------
    5- حاول أن تقوم بعملية رسم " كروكي " للموقع على ورقة خارجية لتسهل عليك عملية التنفيذ ، وتركيب
    الشكل الإجمالي ، ولو كانت الورقة ملونه أو مكتوب على الأماكن الألوان والمعلومات فهذا سيكون أفضل .
    لاحظ الشكل المجاور .
    http://www.mazoo.com/html/images/web-tut-4.jpg
    --------
    -{}--الـــتتمة في الدرس القادم-{}--
    هذا الدرس أحد دروس القسم التقني من موقع مـازن :
    http://www.mazoo.com


  2. #2
    Banned
    صور رمزية DizainLand
    تاريخ التسجيل
    May 2001
    المنطقة
    السعوديه
    ردود
    1,606
    موضوع جدا مهم
    جزاك الله خير
    وبانتظار بقية الدرس

  3. #3
    عضو نشيط
    تاريخ التسجيل
    Jan 2002
    المنطقة
    بلاد الله الواسعة
    العمر
    31
    ردود
    312
    السلام عليكم والرحمة

    والله درس رائع اخوي " مازن " ومفيد جدا جدا جدا
    ومهم جدا جدا جدا


    وشكرا لك على هذا الدرس

    وننتظر التتمة




    محبكم
    تحياتي للجميييييييييييع....دون استثناء!!

    sa7er

  4. #4

    حياكم الله وبيّاكم يا إخوان ... وشكرا لكم على تفاعلكم

    فيه إشكال عند الكثيرين .. في النقطة رقم 3 ، 4
    ------------------------ لذلك بنشرحها بتفصيل أكثر :
    كثرة الألوان ..... إذا كانت الألوان هذي على شكل صور ...
    أما إذا كانت خلفيات لجداول ... أو خلفية لصفحة ... فما راح يتأخر التحميل ....
    فغير معقول أن يقوم أحدهم بواسطة برنامج الفرونت بيج " باختيار خلفية أكثر من لون " .... ولكن المعقول هو أن يقوم بتصميم خلفية
    إما أن تكون كبيرة جدا ً ... " ملء المتصفح كاملا ً "
    وتكون تحوي أكثر من لون ...
    ببساطة .... نصمم العمل في الفوتوشوب بخلفية لون واحد .... لكي يسهل علينا بعد ذلك ... إزالة الصور ...
    مثال ليبين المقال :
    http://mazmooz.virtualave.net/front-4.gif
    واستبدالها بـ " خلفية للصفحة أو للجدول " ... بنفس اللون ...
    فنكون بذلك استبدلنا ... " صورة = حجم ثقيل في التحميل "
    بـ " لون = سريع في التحميل "
    --------------------------------------------------
    4-حاول أن تكون خلفية العمل عندك خلفية بلون واحد ، أو خلفية يسهل " على برنامج الفرونت بيج تكرارها "
    ---
    سؤال جيد وممتاز ......
    نعم الفرونت بيج يكرر الخلفيات !!
    ولكن الكثير من الإخوان قد أغفل هذه الخاصية التي ... لو علموها وأتقنوها .... " لوفرّت عليه جهدا ً ... ووفرت على زائر الموقع وقت كبير في التحميل " ... بس كل هذا .... يكون تحت قياسات معينة !! ومهمة هالشغلة ...

    مثال ... ليبين المقال : ...
    واحد يبي يحط خلفية في موقعه
    المطلوب منه أن تكون الخلفية على كامل الصفحة ... مثل هالشكل :
    http://mazmooz.virtualave.net/front-1.jpg
    .......
    أكيد راح يصمم خلفية ... بحيث إن هالخلفية ... تكون كافيه أن تظهر على جميع الصفحة " 800 * 600 " ....
    http://mazmooz.virtualave.net/front-3.jpg
    عاد ، شوفوا الوقت اللي راح يآخذه الزائر بتحميل هالصورة :) ... " اكنه يحمل برنامج :) " .... وربما كانت قياسات شاشة زائر الموقع " 1024 * 768 " .... وساعتها ماراح تظهر الخلفية بالشكل المطلوب !
    الحل ... هو بالخلفية هذي :
    http://mazmooz.virtualave.net/front-2.jpg
    هذي الخلفية ... تعطي نفس نتيجة ... الخلفية الكبيرة اللي من شوي تكلمنا عنها .... بس إنها أصغر في الحجم والمقاس ! :) ...
    والسبب راجع إلى ... خاصية تكرار الخلفية في برنامج الفرونت بيج ..

    -- أتمنى إني أكون وصلت لكم الفكرة .... واللي عنده أي سؤال يتفضل يطرحه ... وإن شاء الله نحاول إننا نجاوب عليه :) ---
    ملاحظة / الدرس موجود بموقع http://www.mazoo.com
    وما وضع هنا إلا لمناقشته والتعمق فيه أكثر .. وليراه من لم يزر الصفحة :)

    نـــون بيزعل علينا قمنا نشرح الفرونت بيج :) ... هنا :) .. تحملنا أخوي لأن الاستخدام الفعلي لـ
    الفوتوشوب هو 75 % تقريبا ً من الموقع :) يعني أفضل شئ هذا المنبر

  5. #5
    sa7er :
    وعليكم السلام ورحمة الله ....

    ----------------
    التتمة . ستكون في القريب العاجل إن شاء الله تعالى فانتظروا

  6. #6
    حلو كتير كتير مازن


    الله يوفقك ..

    نستناك

Bookmarks

قوانين الموضوعات

  • لا يمكنك اضافة موضوع جديد
  • لا يمكنك اضافة ردود
  • لا يمكنك اضافة مرفقات
  • لا يمكنك تعديل مشاركاتك
  •  
  • كود BB مفعّل
  • رموز الحالة مفعّل
  • كود [IMG] مفعّل
  • [VIDEO] code is مفعّل
  • كود HTML معطل