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

مشاهدة النسخة كاملة : تصميم استايل وتقطيعه من الحجازي



الحجازي
22 Apr 2009, 10:46 AM
وهذا مثال للتخطيط .

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifاضغط هنا لتصغير الصورة.http://www.ta4a.com/vb/imgcache/39539.imgcache.png

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

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

http://www.ta4a.com/vb/imgcache/39540.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39541.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39542.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 831x615 وحجمها 84KB.http://www.ta4a.com/vb/imgcache/39543.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 756x613 وحجمها 169KB.http://www.ta4a.com/vb/imgcache/39544.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 759x612 وحجمها 187KB.http://www.ta4a.com/vb/imgcache/39545.imgcache.png

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

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

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

http://www.ta4a.com/vb/imgcache/39546.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39547.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39548.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39549.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39550.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39551.imgcache.png

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

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

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



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



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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 757x610 وحجمها 167KB.http://www.ta4a.com/vb/imgcache/39552.imgcache.png

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 760x609 وحجمها 235KB.http://www.ta4a.com/vb/imgcache/39553.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 759x611 وحجمها 212KB.http://www.ta4a.com/vb/imgcache/39554.imgcache.png

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

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

http://www.ta4a.com/vb/imgcache/39555.imgcache.png

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




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

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

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

http://www.ta4a.com/vb/imgcache/39556.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 815x654 وحجمها 186KB.http://www.ta4a.com/vb/imgcache/39557.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 765x619 وحجمها 162KB.http://www.ta4a.com/vb/imgcache/39558.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39559.imgcache.png

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 764x618 وحجمها 162KB.http://www.ta4a.com/vb/imgcache/39560.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39561.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 757x606 وحجمها 151KB.http://www.ta4a.com/vb/imgcache/39562.imgcache.png

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 757x456 وحجمها 128KB.http://www.ta4a.com/vb/imgcache/39563.imgcache.png

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

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 756x607 وحجمها 190KB.http://www.ta4a.com/vb/imgcache/39565.imgcache.png

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


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

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



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

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 759x305 وحجمها 95KB.http://www.ta4a.com/vb/imgcache/39566.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39567.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 766x313 وحجمها 122KB.http://www.ta4a.com/vb/imgcache/39568.imgcache.png

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

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

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

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

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

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 755x612 وحجمها 165KB.http://www.ta4a.com/vb/imgcache/39570.imgcache.png
--------------------------------------------------------------------------------

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 756x605 وحجمها 22KB.http://www.ta4a.com/vb/imgcache/39571.imgcache.png

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

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

http://www.ta4a.com/vb/imgcache/39538.imgcache.gifأضغط هنا لتكبير الصورة , مقاس الصورة الأصلي 758x613 وحجمها 146KB.http://www.ta4a.com/vb/imgcache/39572.imgcache.png

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



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

http://www.ta4a.com/vb/imgcache/39573.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39574.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39575.imgcache.png

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

http://www.ta4a.com/vb/imgcache/39576.imgcache.png




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

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

http://www.ta4a.com/vb/imgcache/39577.imgcache.png

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

(قسوة زمن)
22 Apr 2009, 11:26 AM
يسلم الناقل والمنقول

ومنكم نستفيد

شكرا

الحجازي
22 Apr 2009, 12:13 PM
ويسلم لي مرورك يا قسوة الزمن

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

فهلوي
22 Apr 2009, 02:09 PM
من جد تسلم وانا استفدت كثير وقريبا تصميم فهلوي

بنت الجنوب
22 Apr 2009, 03:07 PM
حركااااات ابو عرااااام
تسلم على النقل
انا ماارضى الا عمل ايدينك
هههههههههههههههههههه
باسجل عندك دوره

الحجازي
22 Apr 2009, 04:36 PM
شكرا للجميع على المرور والتشجيع

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

سر الإبداع
22 Apr 2009, 04:49 PM
انا من زمان وقلبي حاس الحجازي هذا ما هو بالهين

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

الحجازي
27 Apr 2009, 05:06 PM
مرحبنبك يا سر الإبداع

مرورك خلى الموضوع له رائحه زكية

فلكم مني كل احترام وتقدير

عادل
07 Jun 2009, 09:46 AM
شكرآ أخي الحجازي

على الطرح الرائع

جديدك يسرني

تحياتي