Slice فتوشاپ را فراموش کنید !

یکی از دغدغه های طراحان قالب وبسایت یا اپلیکیشن های موبایل تبدیل اجزای طرح فتوشاپی به عکسهای PNG می باشد . این کار معمولا با سختی انجام می شود می بایست هر کدام از اجزا را slice بندی کرد و خروجی گرفت ، ممکن است افکت های hover و Active و  Disable در یک مکان بصورت پنهان باشند برای هر کدام از آنها می بایست یکبار خروجی گرفت و خیلی دردسرهای دیگر که ممکن است در حین خروجی گیری با آن مواجه شوید . کار موقعی سخت تر می شود که میخواهید برای موبایل اپلیکیشن بسازید و می بایست برای هر رزولوشن تصویر ، سایز عکس ها را بزرگ و کوچک کنید و همه ی مراحل گفته شده را دوباره انجام دهید . گوشی ها مانند مرورگر دسکتاپ نیستند که بتوان برای یک رزولوشن مانیتور سایت را طراحی کرد و در صورت بزرگ بودن مانیتور بقیه ی صفحه خالی بماند ، طراحی استایل اپلیکیشن موبایل محدودیت های کاربری ای دارد از جمله Full screen بودن همیشگی صفحه ،  فتوشاپ راه کار تازه ای برای کمک به طراحان حتی در ورژن جدید خود یعنی CS6 ارائه نداده است .

اما سایتی به نام cutandslice.me به کمک طراحان وبسایت آمده و یک extension ای برای فتوشاپ ساخته که همه ی این کار ها را بصورت خودکار انجام می دهد ، کافیست شما در سایز دسکتاپ با گروه بندی و نام گذاری لایه ها طرح خود را بسازید این افزونه علاوه بر اینکه خودش لایه ها را Slice میکند ،  قسمتهای خالی را حذف میکند و جدا جدا عکس ها را بصورت PNG و با نام هایی که برای لاه ها قرار داده بودید ذخیره میکند . همچنین برای هر رزولوشن تصویر دستگاهای اندروید و آیفون عملیات را انجام میدهد .

(بیشتر…)

تبدیل خودکار استایل فتوشاپ به CSS3

یکی از مشکلاتی که معمولا طراحان وب دارند تبدیل لایه های PSD به CSS3 است ، تغییر رنگها و گرادیانت ها می بایست بصورت سعی و خطا انجام داد ، باید در سایتی مثل css3please آنقدر متغیرها و رنگ ها را تغییر داد تا نتیجه ی مطلوب بدست آید ، حال اگر چندین دگمه با استایلهای مختلف می بایست تولید شود ، این کار بسیار زمان بر خواهد بود .

در روشی که در این پست قصد دارم شرح دهم تبدیل لایه های فتوشاپی به Css3 به آسانی و با یک کلیک قابل انجام خواهد بود .

css3ps  نام سرویسی است که یک پلاگین فتوشاپ در اختیار شما قرار میدهد و در کمتر از 20 ثانیه کد Css3 و نمونه تولیدی را به شما تحویل می دهد .

(بیشتر…)

تبادل نظر آنلاین روی طرح های گرافیکی

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

در ادامه این نوشته قصد دارم یک سرویس دهنده ی آنلاین تحت وب را برای حل این مشکلات معرفی کنم .

(بیشتر…)

8 اینفوگرفیک پویا و خلاقانه ساخته شده با JS , HTML , CSS

اینفوگرافیک ‌ها یا گرافیک‌های اطلاع رسان، نمایشگران تصویری اطلاعات و داده‌ها هستند.این نگاره‌ها در جاهایی که نیاز به توضیح ساده و یا سریع داده‌ها وجود دارد، استفاده می‌شوند . اما این اینفوگراف ها می توانند یک عکس باشند که با  نمونه ی آن به فارسی آشنا هستیم ، و یا ساخته شده توسط المان های طراحی وب باشند ، در حالت دوم تعامل با کاربر بیشتر خواهد بود ، می توان اطلاعات را از او گرفت و اطلاعات مخصوص آن طیف خاص که کاربر را شامل می شود به او نشان داد ، این روش بسیار جالبتر از نمایش یک عکس به همه ی کاربران است ، در این نوشته قصد دارم 8 سایت اینفوگراف که توسط جاواسکریپت و Html , css ساخته شده اند را معرفی کنم :

State of The Internet

(بیشتر…)

معرفی UI Webkit ای بنام kendoui

kendoui یک UI Webkit قوی و زیبا هست که برای کارکردن احتیاج به Jquery  دارد ، دارای 5 پوسته آماده است ، اما می توان پوسته  های آن را دلخواه کرد

.

پیشتر در مورد یکی دیگر از Webkit  های قدرتمند و سبک دیگری به نام bootstrap صحبت کردیم .

در این نوشته قصد دارم مقایسه ای اجمالی بین این دو  UI و Jquery Ui انجام دهم .

kendoui  علاوه بر داشتن ابزارهایی که معمولا UI های دیگر هم دارند ابزارهای خاصی هم دارد ، می توان از بین ابزارهای آن به Spliter اشاره کرد که می توان بخش بندی هایی همراه با تغییر اندازه روی صفحه انجام داد ،داشتن ابزار ایجاد نمودار شما را از درگیر شدن با ابزارهای دیگر نمودار سازی فارغ می کند

(بیشتر…)

ابزاری مفید برای دریافت طیف رنگ از استایل یک سایت و ویرایش آن

با استفاده از ابزاری که در این نوشته قصد معرفی آن را دارم می توانید با دادن لینک استایل یک سایت طیف رنگ استفاده شده در آن سایت را همراه با کد HEX آنها براحتی داشته باشید .

cssprism.com ابزاری تحت وب می باشد که لینک استایل هر سایتی را به او بدهید آن را از لحاظ طیف رنگی مورد بررسی قرار می دهد .

یکی از فایده های استفاده از این سایت استفاده از طیف رنگ طراحی شده در یک سایت می باشد همچنین اگر می خواهید به طور همزمان تمام المانهایی که در سایت خود دارید را تبدیل به رنگ دیگری کنید از قسمت ویرایشگر رنگ این سایت هم می توانید استفاده کنید و در نهایت استایل ویرایش شده را دانلود نمایید .

(بیشتر…)

معرفی ابزارهایی برای تولید آنلاین کدهای CSS3

در این نوشته قصد دارم چند سایت برای تولید آنلاین کدهای CSS3 معرفی کنم ، با استفاده ار این سایتها شما می توانید براحتی با دیدن پیش نمایش هنگام تولید کد CSS3 ، طراحی المانهای خود را تکمیل تر کنید .

1- css3please.com 

 

(بیشتر…)

پشت زمینه ی pattern منعطف با ابعاد و بزرگنمایی مرورگر با استفاده از html5

استفاده از عکس به عنوان پشت زمینه یکی از روشهای معمول است ، اگر بخواهیم الگویی یا Pattern ای به عنوان background مثلا به صورت زیر استفاده کنیم :

pattern_html5

می توانیم با استفاده از تکرار عکس این کار را انجام دهیم ، همچنین با استفاده از Html5 و JS بصورت زنده و بدون استفاده از عکس هم می توانیم این کار را انجام دهیم . این کار یک مزیت دارد و آنهم اینکه می توانیم بصورت زنده طرح و رنگ و زاویه ی pattern را تغییر دهیم !

در این نوشته طرز استفاده از این پلاگین را  توضیح می دهم همراه با یک دموی ساده و یک سایت که براحتی می توانید پارامترهای رنگ و طرح را تغییر دهید .

 

 

(بیشتر…)