تصميم استايل وتقطيعه من الحجازي

وهذا مثال للتخطيط . اضغط هنا لتصغير الصورة. ويمكن ان يكون متمدد او لا حسب رغبتك لاكن في دورتنا هذه سنشرح الستايل الاحترافي المتمدد . 1- التصميم: التصميم هو اهم

صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 7 من 9
  1. رقم #1
     افتراضي  العنوان : تصميم استايل وتقطيعه من الحجازي
    بتاريخ : 22 Apr 2009 الساعة : 10:46 AM

    طيب شرف 2


    الصورة الرمزية الحجازي

    رقم العضوية : 15813
    الانتساب : Aug 2008
    المشاركات : 4,271
    بمعدل : 1.28 يوميا
    معدل تقييم المستوى : 1233
    التقييم : Array
    الحجازي غير متصل



    وهذا مثال للتخطيط .

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifاضغط هنا لتصغير الصورة.تصميم استايل وتقطيعه الحجازي 39539.imgcache.png

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

    1- التصميم:
    التصميم هو اهم خطوه في تصميم الستايلات والواجهات والثيمات لان سر جمال العمل يكمن في التصميم و التصميم ينبع من خيالك انت وهناك خطوات يجب اتخاذها لتسهل عليك التصميم :
    1- الالوان المستخدمه : يجب عليك اختيار الالوان المستخدمه في التصميم مثلا انا
    اخترت لستايل الدوره اللون الاخضر وتدرجاته (الاخضر الغامق , الاخضر , الاخضر الفاتح , الاخضر الفاقع , الزيتي , والاصفر ) .
    2- بيئة التصميم : يجب اختيار بيئه واسلوب للتصميم مثل بيئة الفيكتور او الزجاجي او الزخرفه او بيئه قديمه او تقنيه او افراح مثل العيد او اسلاميه ....
    3- نوع الستايل : هناك نوعين احترافي او بسيط .
    =============================
    اولا نفتح برنامج الفوتوشوب وننشىء عمل جديد بالمقاسات والاعدادات التاليه :

    تصميم استايل وتقطيعه الحجازي 39540.imgcache.png

    ثم ننشىء طبقه جديده

    تصميم استايل وتقطيعه الحجازي 39541.imgcache.png

    الان سنفعل الشبكه اذهب الى view > Show > Grid ولأخفائها اضغط Ctrl + H

    تصميم استايل وتقطيعه الحجازي 39542.imgcache.png

    الان اختار اداة التحديد المربع ( هذه الخطوه للتوضيح فقط ) وارسم تحديد في منطقة الهيدر انظر الى الصوره
    هذه المنطقه خاصه بالهيدر صمم الهيدر بحيث لايتعدى المنطقه المحدده

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 831x615 وحجمها 84KB.تصميم استايل وتقطيعه الحجازي 39543.imgcache.png

    وهنا لمساتي في الهيدر :

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 756x613 وحجمها 169KB.تصميم استايل وتقطيعه الحجازي 39544.imgcache.png

    اثناء تصميم الهيدر اخذت في الحسبتان منطقة التمدد والصور التجميليه انظر للصوره لتوضيح تقسيم الصور :

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 759x612 وحجمها 187KB.تصميم استايل وتقطيعه الحجازي 39545.imgcache.png

    الصور التي في المربع الازرق هي منطقة التمدد والتي في الربع الاحمر هي الصور الثابته .

    =============================

    الان سأشرح طريقه ربما تكون خارج الدوره لاكن الفائده منها تنظيم عملك

    تصميم استايل وتقطيعه الحجازي 39546.imgcache.png

    1- انشىء مجلد جديد او محفظه جديده تابع الصوره :

    تصميم استايل وتقطيعه الحجازي 39547.imgcache.png

    2- اسم المجلد set1 اظغط عليه باليمين واختار Layer Set Properties :

    تصميم استايل وتقطيعه الحجازي 39548.imgcache.png

    تظهر لنا هذه الرساله غير لون المجلد واسمه الى (الهيدر ) ثم OK

    تصميم استايل وتقطيعه الحجازي 39549.imgcache.png

    الان اسحب جميع الطبقات التي تخص الهيدر داخل هذا المجلد :

    تصميم استايل وتقطيعه الحجازي 39550.imgcache.png

    انظر الى شكل الطبقات داخل المجلد :

    تصميم استايل وتقطيعه الحجازي 39551.imgcache.png

    اليوم نكتفي بهذا القدر من الدوره ونكمل باقي الدوره قريبا

    الفوائد :
    1- نبذه عن تصميم الستالات والفرق بين الستايل الرباعي والاحترافي
    2- نصائح في التصميم
    3- تصميم هيدر الستايل الاحترافي
    4- انشاء مجلد لتنظيم طبقات العمل

    ........................................


    الان نكمل الباقي من الدوره


    نختار اداة التحديد المربع وننشىء مربع في منطقة الفوتر

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 757x610 وحجمها 167KB.تصميم استايل وتقطيعه الحجازي 39552.imgcache.png

    صمم الفوتر الخاص بك ولا تتعدى المنطقه المحدده

    انتهينا من الفوتر مع اخذ منقظة التمدد والصور الثابته بالحسبان

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 760x609 وحجمها 235KB.تصميم استايل وتقطيعه الحجازي 39553.imgcache.png

    بعد ذلك نبدأ في تصميم الاعمده

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 759x611 وحجمها 212KB.تصميم استايل وتقطيعه الحجازي 39554.imgcache.png

    انتهينا من الاعمده ... وهذا هو تصميمي
    ....................................
    لو لاحظة انا لم اركز ع التصميم فقط عطيتكم نبذه او مثال لان تركيزي راح يكون على التقطيع والتركيب والتصميم خاص بك انت
    ..................................

    بعد الانتها من التصميم رتبت الشغل بهذا النحو ... شو الصوره والترتيب

    تصميم استايل وتقطيعه الحجازي 39555.imgcache.png

    الفوائد ::
    شكل لتصميم الستايل



    الان نبدأ المرحله الثانيه من الدروه : التقطيع
    اعتبرها اهم خطوه بعد التصميم حيث التقطيع يحتاج الى دقه في تقطيع الصور مع العلم ان خطوت التقطيع يجب ان تخطط لها اثناء التصميم

    بسم الله نبدأ .. اربط حزام الامان

    اولا نختار اداة تحديد منطفة التقطيع اسمها (Slice Tool) شوف الصوره

    تصميم استايل وتقطيعه الحجازي 39556.imgcache.png

    الان نسحب بالاداه من الزاويه العلويه اليسرى الى الزاويه السفليه اليمنى

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 815x654 وحجمها 186KB.تصميم استايل وتقطيعه الحجازي 39557.imgcache.png

    شوف طلع حول التصميم حدود بنيه وهذي هي حدود التقطيع ومكتوب في الزاويه العلويه اليسرى رقم 1 داخل مربع ازرق

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 765x619 وحجمها 162KB.تصميم استايل وتقطيعه الحجازي 39558.imgcache.png

    الحين نختار الاداه الثانيه والي هي اداة التقطيع واسمها ..( Slice Select Tool)

    تصميم استايل وتقطيعه الحجازي 39559.imgcache.png

    بدينا ف الجد ركزووووووووووووا زين ترى الخطوه بسيطه جدا لاكن انا ابشرحها بالتفصيل ..

    بعد ماخترنا الاداه نروح في منتصف العمل ونضغط بيمين الماوس تطلع لنا قائمه نختار Divide Slice

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 764x618 وحجمها 162KB.تصميم استايل وتقطيعه الحجازي 39560.imgcache.png

    تظهر لنا هذه الرساله .... شرح للرساله
    الرساله هذي تقسم لك القطعه الى تقسيم طولي وتقسيم عرضي الان حنا بنقسم المربع الكبير الى 3 قطع عرضيه

    تصميم استايل وتقطيعه الحجازي 39561.imgcache.png

    شوف كيف جت خطوط التقطيع

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 757x606 وحجمها 151KB.تصميم استايل وتقطيعه الحجازي 39562.imgcache.png

    (..الان راح اشرح لكم كيف تحرك الخطوط وتحدد منطقة التقطيع ركزوا معي ..)

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

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 757x456 وحجمها 128KB.تصميم استايل وتقطيعه الحجازي 39563.imgcache.png

    الحين روح للحد السفلي وضع عليه مؤشر الفأره شوف صار شكله سهمين فوق وتحت يعني اسحب الى فوق او تحت

    اسحب الخط الى فوق قليلا وبكذا حددنا الهيدر ..
    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 775x423 وحجمها 130KB.تصميم استايل وتقطيعه الحجازي 39564.imgcache.png

    الان اترك الباقي لك حدد الفوتر والاعمده شوف الصوره وطبق مثلها

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 756x607 وحجمها 190KB.تصميم استايل وتقطيعه الحجازي 39565.imgcache.png

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


    .................................

    بعد ماعرفنا التقطيع العرضي نبدأ الان في التقطيع الطولي


    طبع كل جزء نقطعه تقطيع طولي منفرد بمعنى نبدأ في تقطيع الهيدر طوليا
    ثم الاعمده ثم الفوتر

    بسم الله نبدأ ...

    نروح للهيدر ونضغط عليه بزر الماوس الايمن ونختار Divide Slice

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 759x305 وحجمها 95KB.تصميم استايل وتقطيعه الحجازي 39566.imgcache.png

    تظهر لنا رسالة التقطيع اختار التقطيع الطولي وقطع الهيدر الى 6 قطع

    تصميم استايل وتقطيعه الحجازي 39567.imgcache.png

    كيف تتم آلية التقطيع :: لكل ستايل آليه في التقطيع لاكن انا عطيتك التقطيع الاحترافي
    ويمكن يكون التقطيع فيه احترافيه اكبر .. مثلا انا عندما صممت الهيدر او الستايل قررت ان اقطعه
    الى 6 قطع وهي تشمل الاتي شوف الصوره ...

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 766x313 وحجمها 122KB.تصميم استايل وتقطيعه الحجازي 39568.imgcache.png

    الان المطلوب منك تحريك خطوط التقطيع وقطع حسب الصوره التاليه :-

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 767x365 وحجمها 126KB.تصميم استايل وتقطيعه الحجازي 39569.imgcache.png
    شرح القطع :

    اهم قطعتين هم القطع الخاصه بالاعمده الي هي 1 و 6 هذي القطع مقساتها لاتتغير ابدا سواء في الهيدر والاعمده او الفوتر وهي التي يقف عليها الستايل ... التوضيح قادم

    اما القطع الاخرى وهي 2 و 4 و 5 هذي صور تجميليه يمكن ان تتغير مقاساتها وهي موجوده
    في الهيدر والفوتر فقط ولا تؤثر في وزنية الستايل

    القطعه رقم 2 ههذه مهمه لاكن ليست بأهمية الاعمده فهي خاصه بالتمدد ولها دور جمالي هي اسا
    توافق الستايل مع مقاسات الشاشه

    ----------------------------------------------------------------------------------

    انتهينا من تقطيع الهيدر الحين قطع الفوتر مثل تقطيع الهيدر
    شوف الصوره

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 755x612 وحجمها 165KB.تصميم استايل وتقطيعه الحجازي 39570.imgcache.png
    --------------------------------------------------------------------------------

    تقطيع الاعمده طبعا في الاعمده مانحتاج الى 6 قطع طوليه نحتاج فقط 3 قطع طوليه

    شوف تخطيط التقطيع

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 756x605 وحجمها 22KB.تصميم استايل وتقطيعه الحجازي 39571.imgcache.png

    مفهوم اخير للتقطيع وهو كأنك ماسك سكين وتقطع تورته << تشبيه لذيذ صح ^_^

    وهنا الشكل النهائي للستايل بعد التقطيع .... بقي علينا بس الحفظ

    تصميم استايل وتقطيعه الحجازي 39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 758x613 وحجمها 146KB.تصميم استايل وتقطيعه الحجازي 39572.imgcache.png

    "تابع معي خطوات الحفظ "


    اذهب الى " ملف > حفظ كصفحة ويب" او "file > save for web"

    تصميم استايل وتقطيعه الحجازي 39573.imgcache.png

    تظهر لك صفحه كبيره وفيها الستايل ومبين التقطيع المطلوب اضغط "حفظ " او " save "

    تصميم استايل وتقطيعه الحجازي 39574.imgcache.png

    الان انشىء مجلد في اي مكان واحفظ الستايل فيه شوف الصوره وتاكد من الاعدادت

    تصميم استايل وتقطيعه الحجازي 39575.imgcache.png

    وبكذا انتهينا من التقطيييع ومبرووووووك , روح شوف الستايل وهو مقطع يطلع بالشكل هذا

    تصميم استايل وتقطيعه الحجازي 39576.imgcache.png



    انتهينا وبحمد من الله من قسم التقطيع والان بقي علينا القسم الاخير من تصميم الستايل وهو التركيب في الفرونت بيج ثم نقل الستايل الى المنتدى لرؤية الشكل النهائي له

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

    تصميم استايل وتقطيعه الحجازي 39577.imgcache.png

    منقوووووووووووول لعيون اعضاء منتديات الطيب للجميع



    jwldl hsjhdg ,jr'dui lk hgp[h.d



     



  2. رقم #2
     افتراضي  العنوان : رد: تصميم استايل وتقطيعه من الحجازي
    كاتب الموضوع : الحجازي
    بتاريخ : 22 Apr 2009 الساعة : 11:26 AM

    الــــزمـــــــن علـــم الطـــفل الصــغير


    الصورة الرمزية (قسوة زمن)

    رقم العضوية : 1395
    الانتساب : May 2005
    المشاركات : 1,601
    بمعدل : 0.35 يوميا
    معدل تقييم المستوى : 290
    التقييم : Array
    (قسوة زمن) غير متصل



    يسلم الناقل والمنقول

    ومنكم نستفيد

    شكرا


     



  3. رقم #3
     افتراضي  العنوان : رد: تصميم استايل وتقطيعه من الحجازي
    كاتب الموضوع : الحجازي
    بتاريخ : 22 Apr 2009 الساعة : 12:13 PM

    طيب شرف 2


    الصورة الرمزية الحجازي

    رقم العضوية : 15813
    الانتساب : Aug 2008
    المشاركات : 4,271
    بمعدل : 1.28 يوميا
    معدل تقييم المستوى : 1233
    التقييم : Array
    الحجازي غير متصل



    ويسلم لي مرورك يا قسوة الزمن

    وأهم حاجة اننا نستفيد ومرحبنبكم في اي استفسارات


     



  4. رقم #4
     افتراضي  العنوان : رد: تصميم استايل وتقطيعه من الحجازي
    كاتب الموضوع : الحجازي
    بتاريخ : 22 Apr 2009 الساعة : 02:09 PM

    طيب شرف 2


    الصورة الرمزية فهلوي

    رقم العضوية : 2475
    الانتساب : Apr 2006
    المشاركات : 4,611
    بمعدل : 1.09 يوميا
    معدل تقييم المستوى : 17
    التقييم : Array
    فهلوي غير متصل



    من جد تسلم وانا استفدت كثير وقريبا تصميم فهلوي


     



  5. رقم #5
     افتراضي  العنوان : رد: تصميم استايل وتقطيعه من الحجازي
    كاتب الموضوع : الحجازي
    بتاريخ : 22 Apr 2009 الساعة : 03:07 PM



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

    رقم العضوية : 15094
    الانتساب : Jan 2008
    المشاركات : 10,770
    بمعدل : 3.03 يوميا
    معدل تقييم المستوى : 1318
    التقييم : Array
    بنت الجنوب غير متصل



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


     



  6. رقم #6
     افتراضي  العنوان : رد: تصميم استايل وتقطيعه من الحجازي
    كاتب الموضوع : الحجازي
    بتاريخ : 22 Apr 2009 الساعة : 04:36 PM

    طيب شرف 2


    الصورة الرمزية الحجازي

    رقم العضوية : 15813
    الانتساب : Aug 2008
    المشاركات : 4,271
    بمعدل : 1.28 يوميا
    معدل تقييم المستوى : 1233
    التقييم : Array
    الحجازي غير متصل



    شكرا للجميع على المرور والتشجيع

    والثقل ورى يا بنت الأصول


     



  7. رقم #7
     افتراضي  العنوان : رد: تصميم استايل وتقطيعه من الحجازي
    كاتب الموضوع : الحجازي
    بتاريخ : 22 Apr 2009 الساعة : 04:49 PM

    مشرف المنتديات العامة


    الصورة الرمزية سر الإبداع

    رقم العضوية : 18
    الانتساب : May 2004
    العمر : 36
    المشاركات : 3,167
    بمعدل : 0.65 يوميا
    معدل تقييم المستوى : 19
    التقييم : Array
    سر الإبداع غير متصل



    انا من زمان وقلبي حاس الحجازي هذا ما هو بالهين

    شكرا الف يالحجازي


     



صفحة 1 من 2 12 الأخيرةالأخيرة

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)

المواضيع المتشابهه

  1. مشاركات: 9
    آخر مشاركة: 25 Jun 2011, 02:50 AM
  2. ملف تفصيلي عن الحجازي
    بواسطة ابو الطيب في المنتدى نُقطَہۧ بِدَآيہۧ
    مشاركات: 12
    آخر مشاركة: 04 Oct 2010, 12:14 AM
  3. شرح تصميم استايل من الحجازي بالتفاصيل المملة
    بواسطة الحجازي في المنتدى مدرسة التصميم
    مشاركات: 8
    آخر مشاركة: 07 Jun 2009, 09:44 AM
  4. صور من قصر الحجازي
    بواسطة الحجازي في المنتدى جَمآلْ الزوآيـآ
    مشاركات: 16
    آخر مشاركة: 02 Jun 2009, 03:03 PM

المفضلات

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •