ورود

نسخه کامل مشاهده نسخه کامل : آموزش : با Slice در فتوشاپ تصاویر خود را لینک دار کنید


huti_421
27-10-2009, 22:59
رمز یک طراحی حرفه‌ای و مناسب ، استفاده از ابزار‌های متناسب و روش‌های درست است که در تمام شاخه های طراحی اعم از گرافیک ، برنامه نویسی و غیره ، نیاز به رعایت آن‌ها احساس می‌شود.

قصد داریم در این مقاله با ابزار Slice در نرم افزار فتوشاپ بیشتر آشنا شده و طرز استفاده‌ی درست و به جای آن را یاد بگیریم.


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

این ابزار که در بخش «ابزار‌های انتخاب / Selection Tools» گنجانده شده و وظیفه‌ی قطعه قطعه کردن صفحات وب و یا تصاویر شما را به عهده دارد. با کمک این ابزار شما قادر به تکه تکه کردن تصاویر بوده و هر قسمت را به صفحه‌ای خاص لینک دهید.

فرض کنید شما هدری طراحی کرده و بدون دانش برنامه نویسی تحت وب قصد دارید هدر را مجهز به منو کنید ؛ با ابزار Slice می‌توانید تصویر مد نظر را به چند تکه تقسیم کنید و Site Map را بر این اساس تنظیم کنید.

میانبر این ابزار در محیط نرم‌افزار فتوشاپ K بوده و با زدن این دکمه ، ابزار برای شما قابل استفاده خواهد بود.

برای شروع ، مدلی شبیه به تصویر زیر بر روی پروژه ایجاد می‌کنیم :


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

حال با دوبار کلیک بر روی مستطیل آبی رنگ که اینجا عدد 03 روی آن نوشته شده ، صفحه‌ای گشوده شده و تنظیمات مربوط به آدرس‌دهی را در اختیار شما قرار می‌دهد.


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

شما می‌توانید برای هر قسمت آدرس‌دهی مجزا انجام دهید و به نوعی هدری چند آدرسی خلق کنید.

کار برای ذخیره بسیار ساده بوده و به این منظور ، از منوی File گزینه‌ی Save For Web and Devices را انتخاب کنید. بعد از شخصی سازی تنظیمات مربوط به پسوند و کیفیت با کلیک بر روی دکمه‌ی Save صفحه‌ای جدید گشوده شده که باید تغییراتی نظیر تصویر زیر بر آن اعمال کنید :


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

بعد از اتمام در محلی که برای ذخیره‌ی تصویر مشخص کردید ، علاوه بر تصاویر که در پوشه‌ی Images هستند ، یک فایل html حاوی کدهای مربوط به تصویر و آدرس‌ها هم ضمیمه شده است.
مورد دیگر استفاده از این ابزار ، قطعه قطعه کردن تصاویر یک صفحه‌ی وب به منظور تسریع در بارگذاری بوده که روش کار با آنچه که گفته شد ، تفاوتی نخواهد داشت.

این مقاله توسط هومن هاتفی برای سایت پریانا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])و پی سی ورلد ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) نوشته شده است.
mf.designing
27-10-2009, 23:03
مثله همیشه عالی ... هومن جان دستت درد نکنه .
آرزوی موفقیت برات تو کنکور :40::46:
hamed9
27-10-2009, 23:38
سلام همون جان خدا قوت:11:
آموزش کار بردی هستش ممنون.:31:
بازم سر بزن بهمون.
Saeed kmss-D
28-10-2009, 09:40
سلام...


بسیار عالی و کامل بود!
ممنون و خسته نباشی هومن جان..



موفق باشی♥♥♥
Hitman-Group
28-10-2009, 19:02
سلام هومن
ممنون
بازم از این کارا بکن!
احمد ترابی
30-10-2009, 10:15
سلام
تو همش دست روی کارهای مهم میزاری
دستت درد نکنه

عالی بود موفق باشید
huti_421
03-11-2009, 02:26
ممنون بابت محبت بی اندازه ی همگی دوستان :-ایکس
mehdi_pro2
03-11-2009, 15:55
میشه بیشتر درباره ی آموزش فتوشاپ که مربوط به طراحی صفحات وب میشه توضیح بدین؟! :20:
huti_421
03-11-2009, 19:32
اساس کار به همون صورتیه که توضیح دادم و توفیر آن چنان نداره ، سایت رو به صورت عکس طراحی می کنید ، نوشته بهش اضافه میکنید و در نهایت با Slice شروع میکنید به قطعه قطعه کردن پروژه تا بشه یه وبسایت و بعد خروجی html و تصویر میگیرید

و در ادامه ، توصیه ی من مطالعه مطالب این وبلاگ هست :


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
miladdd_blue
24-11-2009, 20:52
آقا من یه سوال داشتم اینکه غیر از لینک به عکس میتوان بخی از اجزا به فایلی مرتبط کرد مثلا درمورد وصل کردن بخشی از اجزا عکسبه فایلی یعنی مثل نوشته ای هایپرلینک زدن
huti_421
29-11-2009, 16:54
باید روی localhost باشه و روی کلاینت اون رو پیاده کنید ( روی هارد مثلا )
nelahe
12-10-2010, 01:00
رمز یک طراحی حرفه‌ای و مناسب ، استفاده از ابزار‌های متناسب و روش‌های درست است که در تمام شاخه های طراحی اعم از گرافیک ، برنامه نویسی و غیره ، نیاز به رعایت آن‌ها احساس می‌شود.

قصد داریم در این مقاله با ابزار Slice در نرم افزار فتوشاپ بیشتر آشنا شده و طرز استفاده‌ی درست و به جای آن را یاد بگیریم.


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

این ابزار که در بخش «ابزار‌های انتخاب / Selection Tools» گنجانده شده و وظیفه‌ی قطعه قطعه کردن صفحات وب و یا تصاویر شما را به عهده دارد. با کمک این ابزار شما قادر به تکه تکه کردن تصاویر بوده و هر قسمت را به صفحه‌ای خاص لینک دهید.

فرض کنید شما هدری طراحی کرده و بدون دانش برنامه نویسی تحت وب قصد دارید هدر را مجهز به منو کنید ؛ با ابزار Slice می‌توانید تصویر مد نظر را به چند تکه تقسیم کنید و Site Map را بر این اساس تنظیم کنید.

میانبر این ابزار در محیط نرم‌افزار فتوشاپ K بوده و با زدن این دکمه ، ابزار برای شما قابل استفاده خواهد بود.

برای شروع ، مدلی شبیه به تصویر زیر بر روی پروژه ایجاد می‌کنیم :


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

حال با دوبار کلیک بر روی مستطیل آبی رنگ که اینجا عدد 03 روی آن نوشته شده ، صفحه‌ای گشوده شده و تنظیمات مربوط به آدرس‌دهی را در اختیار شما قرار می‌دهد.


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

شما می‌توانید برای هر قسمت آدرس‌دهی مجزا انجام دهید و به نوعی هدری چند آدرسی خلق کنید.

کار برای ذخیره بسیار ساده بوده و به این منظور ، از منوی File گزینه‌ی Save For Web and Devices را انتخاب کنید. بعد از شخصی سازی تنظیمات مربوط به پسوند و کیفیت با کلیک بر روی دکمه‌ی Save صفحه‌ای جدید گشوده شده که باید تغییراتی نظیر تصویر زیر بر آن اعمال کنید :


[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

بعد از اتمام در محلی که برای ذخیره‌ی تصویر مشخص کردید ، علاوه بر تصاویر که در پوشه‌ی Images هستند ، یک فایل html حاوی کدهای مربوط به تصویر و آدرس‌ها هم ضمیمه شده است.
مورد دیگر استفاده از این ابزار ، قطعه قطعه کردن تصاویر یک صفحه‌ی وب به منظور تسریع در بارگذاری بوده که روش کار با آنچه که گفته شد ، تفاوتی نخواهد داشت.

این مقاله توسط هومن هاتفی برای سایت پریانا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])و پی سی ورلد ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) نوشته شده است.










سلام دوست عزیز
میدونم ربطی نداره اما چون عکس ها را اینجا دیدم گفتم بپرسم ممنون می شم جواب بدهید :11:

در این عکس ها شما به جز مثلاً یک گزینه یا یک قسمت باقی تصویر را تار کرده اید چطوری این کار را انجام داده اید خیلی مایل هستیم یاد بگیرم ممنون میشم زحمت بکشید
huti_421
12-10-2010, 14:36
از لایه یه کپی گرفتم و بهش از منوی فیلـتر و بخش Blur گزینه‌ی Gaussian Blur رو اعمال کردم و بعد قسمت‌های اضافی رو حذف کردم

اگه تغییر رنگ هم مد نظر دارید از بخش Color Balance با میانبر Ctrl + B می‌تونید رنگش رو تغییر بدید

( در آخر شفافیت لایه‌ی محو رو یه مقدار کم کنید )
King A
12-10-2010, 17:26
با عرض پوزش فراوان خدمت دوستان و عذرخواهی
نوشته PDF شد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
ahivid
11-11-2010, 23:38
مفــــــــــــــــــید بود:8:
eilia66
01-06-2011, 09:11
سلام من عکس های این امزش رو نمی بینم چیکار کنم؟ تشکر
M1450M
01-06-2011, 16:37
مرسی
باحال بود