درخواست طراحی آیکون

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
سلام
یه نرم افزار بکاپ گیری میخوام بسازم اسمش "پشتیبانگیر طلوع" هست .
کسی هست که برام یه لوگو (در قالب آیکون یا png) در ابعاد 24*24 که شکل اش به موضوع بکاپ گیری بخوره ، درست کنه؟ یکی دیگه هم همونو در ابعاد 45*45 میخوام برای آیکونی که در دسکتاپ باشه.
خیلی ممنون
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
سلام
کسی میتونه در تصویر زیر ، هر جا رنگ آبی بود ، رنگی را جایگزین کنه و توی 2 نسخه از تصویر بهم بده؟
یه نسخه از تصویر ، بجای رنگ آبی ، رنگ زرد جایگزین بشه و یه نسخه ی دیگه از تصویر ، رنگ قرمز.
جوری که مثلا وقتی قراره رنگی جایگزین بشه ، کاملا طبیعی باشه . مثلا قسمت هایی از تصویر که رنگ آبی پر رنگ هست ، بجاش رنگ زرد پر رنگ جایگزین بشه (هیچ اثری از پس زمینه ی آبی دیگه نباشه . البته در صورتی که رنگ زرد قراره جایگزین بشه) و قسمت هایی که رنگ آبی کم رنگ هست ، رنگ زرد کم رنگ جایگزینش بشه (هیچ اثری از پس زمینه ی آبی دیگه نباشه . البته در صورتی که رنگ زرد قراره جایگزین بشه) .
من فتوشاپ رو خیلی خیلی کم بلدم و اصلا مهارت ندارم اما از replace color اش استفاده کردم ، رنگ ها طبیعی نبودن و کاملا مشخص بود که رنگ زرد مصنوعی جایگزینش شده بود و پس زمینه ی آبی باز هم مشخص بود.
تصویر را پیوست کردم.
با تشکر
 

پیوست ها

  • 1.png
    1.png
    1.3 مگایابت · بازدیدها: 2

the_king

مدیرکل انجمن
سلام
کسی میتونه در تصویر زیر ، هر جا رنگ آبی بود ، رنگی را جایگزین کنه و توی 2 نسخه از تصویر بهم بده؟
یه نسخه از تصویر ، بجای رنگ آبی ، رنگ زرد جایگزین بشه و یه نسخه ی دیگه از تصویر ، رنگ قرمز.
جوری که مثلا وقتی قراره رنگی جایگزین بشه ، کاملا طبیعی باشه . مثلا قسمت هایی از تصویر که رنگ آبی پر رنگ هست ، بجاش رنگ زرد پر رنگ جایگزین بشه (هیچ اثری از پس زمینه ی آبی دیگه نباشه . البته در صورتی که رنگ زرد قراره جایگزین بشه) و قسمت هایی که رنگ آبی کم رنگ هست ، رنگ زرد کم رنگ جایگزینش بشه (هیچ اثری از پس زمینه ی آبی دیگه نباشه . البته در صورتی که رنگ زرد قراره جایگزین بشه) .
من فتوشاپ رو خیلی خیلی کم بلدم و اصلا مهارت ندارم اما از replace color اش استفاده کردم ، رنگ ها طبیعی نبودن و کاملا مشخص بود که رنگ زرد مصنوعی جایگزینش شده بود و پس زمینه ی آبی باز هم مشخص بود.
تصویر را پیوست کردم.
با تشکر
 

پیوست ها

  • Yellow.png
    Yellow.png
    1.2 مگایابت · بازدیدها: 1
  • Red.png
    Red.png
    1.4 مگایابت · بازدیدها: 1
  • Yellow2.png
    Yellow2.png
    1.2 مگایابت · بازدیدها: 1

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
خیلی ممنون استاد علی که عاوه بر برنامه نیس اش ، اینجا هم کمک کردین. :rose:
همینو میخواستم.
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
سلام
ببخشید . عکس زیر را درست کردم . اما نمیدونم چجوری محل تقاطع اون نیم دایره ها با ضلع بالا و پایین (که یه خورده شکستگی ایجاد شد) را دقیق درست کنم.
میخوام شبیه دکمه های Adobe Photoshop 2019 در قسمت تنظیمات Preference اش بشه (دکمه های OK و Cancel و ...)


Button Standard.png

الان دکمه در بالا ، قرار داده هست منتها پشت زمینه را سفید نشون میده ، معلوم نیست .
اگه هم میشه ، در ابعاد 80 در 30 میخوام.
خیلی ممنون
 

the_king

مدیرکل انجمن
سلام
ببخشید . عکس زیر را درست کردم . اما نمیدونم چجوری محل تقاطع اون نیم دایره ها با ضلع بالا و پایین (که یه خورده شکستگی ایجاد شد) را دقیق درست کنم.
میخوام شبیه دکمه های Adobe Photoshop 2019 در قسمت تنظیمات Preference اش بشه (دکمه های OK و Cancel و ...)


مشاهده پیوست 112499

الان دکمه در بالا ، قرار داده هست منتها پشت زمینه را سفید نشون میده ، معلوم نیست .
اگه هم میشه ، در ابعاد 80 در 30 میخوام.
خیلی ممنون
نمی تونم راهنمایی تون کنم چون هیچ عکسی نمی بینم.
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
نمی تونم راهنمایی تون کنم چون هیچ عکسی نمی بینم.

خیلی ممنون
همراش هست . منتها سفیده مشخص نیست.
البته یکی را از خود همون دکمه ی OK در فتوشاپ عکس گرفتم و طراحی کردم (آبی اش کردم که مشخص بشه) :


a.png

فکر کنم همین خوب باشه . نمیدونم
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
سلام استاد .
ضمن تشکر از جواب تون ، من توی فتوشاپ میخوام تصویر png ای را به svg تبدیل کنم .
تصویر هم ، تصویر زیر هست :

test crop 22.png

اما نمیدونم که چه مشکلی هست که وقتی در صفحه ی File>Export>Export As در فتوشاپ میرم ، خیلی از اوقات ، صفحه اش خالی بالا میاد (گزینه هایی از جمله انتخاب فرمت png را نداره) و تک و توک و شانسی ، ممکنه درست بالا بیاد و صفحه ، کامل بالا بیاد و گزینه ی svg را بیاره .
با اونکه همیشه ، یه حرکت را انجام میدم . یعنی اول ، بخش سیاه از تصویر بالا را انتخاب میکنم و بعد کلیک راست و گزینه ی Make Work Path را میزنم و بعد از منوی Layer ، گزینه ی New Fill Layer>Solid Color را انتخاب میکنم و بعد هم میخوام Export بگیرم اما در اغلب اوقات اون صفحه خالی بالا میاد .
نسخه ی فتوشاپم هم 21.1.1 هست .


مشکل خالی بالا اومدن اون صفحه در بیشتر اوقات چیه و چی کار باید کنم؟
نرم افزار illustrator و اون نرم افزارهایی که نام بردین را ندارم .
یا اینکه شما میتونین خروجی تصویر بالا را بی زحمت برام بصورت svg در بیارین؟


از سایت زیر هم تبدیل به svg کردم :
PNG to SVG - Convert image online
اما داده (Data) اش را نمیدونم چجوری هه . ولی خروجی فتوشاپ ، داده اش کاملا مشخص هست .
خیلی ممنون .
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
آها متوجه شدم استاد .
اصلا لازم به رفتن به اون صفحه ی export نیست .
روی همون لایه ای که بصورت shape در فتوشاپ در آوردیم (بعد از قضیه ی Make Work Path و انتخاب رنگ Solid Color که در بالا گفتم) ، روی اون لایه مون کلیک راست میکنیم و گزینه ی copy svg را طبق شکل زیر انتخاب میکنیم و با اینکار ، کل اطلاعات xml مربوط به اون شکل را برامون کپی میکنه (که میتونیم به نات پد ببریم و paste اش کنیم) :

1.JPG
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
خیلی ممنون استاد از طراحی آیکونی که برام انجام دادید .
استاد ، میگم الان رسیدم به کدهای مربوط به آیکون در برنامه ام .

خوب این آیکون هایی که خواستم و زحمت طراحی اش را در پست 2 برام کشیدید ، زمانی بود که از Widow Form میخواستم برای ساخت برنامه ام استفاده کنم .
بعد که به WPF کوچ کردم ، شما گفتید که از فایل های Bitmap در برنامه ام استفاده نکنم .

این آیکونی هم که دادم و رنگش را عوض کردید برام ، چون هم جزئیاتِ شکل اش و هم جزئیاتِ رنگش زیاده ، تبدیلش برام به فایل svg (طوری که Data اش را بصورت عدد بدست بیارم) ، خیلی سخته . اون هم جوری که مثل همین شکل (در پست 2 که دادید ، بشه) . احتمالا کلا هم سخت هست (یعنی شاید برای من فقط ، سخت نباشه) .

دوستم هم یه آیکون برام طراحی کرده بود که هر چند زمانی که بزرگ تر هست ، خوبه اما زمانی که ابعادش (برای استفاده به عنوان آیکون) کوچیک میشه ، زیاد خوب از آب در نمیاد . این آیکون چون ساده تر بود ، Data ی SVG اش را به راحتی در فتوشاپ به دست میاوردم . اما عیب بزرگش ، خوب و زیبا نبودن زمانی که کوچیک میشد ، هست .

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

نهایتا اینکه احتمالا بجای اون آیکون دوستم ، از آیکونی که شما در پست 2 طراحی کردین در WPF استفاده میکنم (هر چند بصورت Bitmap هست) .

یا شاید هم ترکیبی از هر دو (یعنی فرضا در TaskBar و SystemTray که آیکون های کوچیکتری استفاده میشن ، از آیکون شما در پست 2 و درنوار عنوان برنامه که یه کم بزرگتر میشه آیکون گذاشت ، برای دوستم) .
اگه فقط از یه آیکون استفاده کنم ، به احتمال زیاد ، همون آیکونِ Bitmap ئه شماست .

تشکر استاد .
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
سلامی مجدد
استاد ، آیکونی که در پست 3 زحمت طراحی شو کشیدین ، منبع آموزش اش را میگین؟
من در شکل زیر :

DriveBackupNormal.png

خواستم رنگش را به زرد و قرمز تغییر بدم . هر چند ، وقتی شکلش کوچیک میشه ، بد نیست اما وقتی بزرگنمایی کنیم ، رنگ های آبیِ کنارش در شکل زیر مشخص هست :

test.png

منظورم این نیست که بخوام شکل را بزرگنمایی کنم .
ولی به هر حال توی ظاهرش یه کم (نامحسوس) تاثیر میذاره .

-----------

هر چند گفتین که از تصاویر وکتور استفاده کنم اما واقعا گاهی نمیشه از این مدل تصاویر استفاده کرد . فرضا اگه اشتباه نگم ، آیکون درایو در This PC (یا My Computer) ئه ویندوز ، بهش میاد که تصویر وکتور نباشه (نمیدونم) .

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

the_king

مدیرکل انجمن
سلامی مجدد
استاد ، آیکونی که در پست 3 زحمت طراحی شو کشیدین ، منبع آموزش اش را میگین؟
من در شکل زیر :

مشاهده پیوست 114725

خواستم رنگش را به زرد و قرمز تغییر بدم . هر چند ، وقتی شکلش کوچیک میشه ، بد نیست اما وقتی بزرگنمایی کنیم ، رنگ های آبیِ کنارش در شکل زیر مشخص هست :

مشاهده پیوست 114726

منظورم این نیست که بخوام شکل را بزرگنمایی کنم .
ولی به هر حال توی ظاهرش یه کم (نامحسوس) تاثیر میذاره .

-----------

هر چند گفتین که از تصاویر وکتور استفاده کنم اما واقعا گاهی نمیشه از این مدل تصاویر استفاده کرد . فرضا اگه اشتباه نگم ، آیکون درایو در This PC (یا My Computer) ئه ویندوز ، بهش میاد که تصویر وکتور نباشه (نمیدونم) .

یا بالاخره کلا من چون نرم افزار طراحی تصاویر مثل فتوشاپ و illustrator و ... بلد نیستم (خیلی کم بلدم) ، طراحی آیکون وکتور را بلد نیستم .
تبدیل عکس بالا به وکتور هم چون عکس اش پیچیدگی زیاد داره ، بلد نیستم .
تشکر استاد .
اساسش اینه که ترکیب کلیدی Ctrl + U (منوی Image > Adjustments > Hue/Saturation) رو فشار بدهید.
تیک Colorize رو بزنید و Hue و احیانا Saturation رو تغییر بدهید. اگر قراره صرفا رنگ قسمت هایی رو تغییر بدهید باید قبلش فقط اون ناحیه رو ماسک و انتخاب کنید.
 

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
اساسش اینه که ترکیب کلیدی Ctrl + U (منوی Image > Adjustments > Hue/Saturation) رو فشار بدهید.
تیک Colorize رو بزنید و Hue و احیانا Saturation رو تغییر بدهید. اگر قراره صرفا رنگ قسمت هایی رو تغییر بدهید باید قبلش فقط اون ناحیه رو ماسک و انتخاب کنید.

آه . زودتر میگفتین استاد ها .
خیلی رنگ رو جالب تر به خوردش میده .
من مدام بخش مورد نظر را انتخاب و fill میکردم یا با براش رنگ میکردم که اصلا جالب نمیشد .

--------

میگم استاد ، این آموزش لینک زیر را تازه پیدا کردم :


آموزش جالبی هه انگار برای تبدیل هر نوع تصویر به vector .

در تصویر زیر :


DriveBackupNormal.png


با اون آموزش ، تصویر بالا را تونستم بصورت vector ای که در فایل زیر میدم ، دربیارم (فایل psd را پیوست میکنم) .
که اون psd ، بصورت شکل زیر شد :


1.JPG


حالا نمیدونم چی کار کنم که اون خط اصلی ای که وسطش را تقریبا نصف میکنه جوری بیاد که دو طرفش را با رنگ های زردِ پر رنگ تر و همچنین زردِ کم رنگ تر ، رسم کنم (شبیه شکل پست 11 که دو نوع زردِ کم رنگ و پر رنگ کردم) ؟

جوری که هر کدوم از این قسمت های زرد را بشه در لایه ای جداگانه اطلاعاتش را گرفت و منتقل کرد(تا به عنوان لایه ای که در wpf بتونم برای این قسمت از path اش ، رنگِ path اش را تغییر بدم . فرضا بعدا به دو تا رنگِ قرمزِ کم رنگ تر و قرمزِ پر رنگ تر و ... تغییرِ رنگ بدم) ؟

من که فتوشاپ خیلی کم بلدم . ولی به نظرتون میارزه این کار را کنم و به vector تبدیلش کنم (با اونکه نمیدونم که بتونم یا نه) .
یا اینکه با همون روشی که برای تغییرِ رنگ در پست قبلی راهنمایی کردین ، به فایل png تبدیل و استفاده کنم؟
تشکر
 

پیوست ها

  • DriveBackupNormal_SVG.psd
    217.3 کیلوبایت · بازدیدها: 0

the_king

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

SajjadKhati

کاربر فعال <A href="http://forum.majidonline.com/f
اولا این آیکون لایه باز نیست، برای همین اگر قبل از تبدیل یکسان سازی و تفکیک رنگ انجام نشه خروجی خوبی نمیده.
ثانیا فتوشاپ برای تبدیل تصویر به وکتور نرم افزار مناسبی نیست.

سلامی مجدد استاد
خیلی ممنون .
تبدیل به وکتورش کردم :green:
بله درست میگید . برای تفکیک رنگ (تا حدودی) ، این عکس را در 6 لایه (و 6 رنگ متفاوت) ، رنگ آمیزی کردم .هر چند ، وقتی ، تصویر وکتورش ، بزرگ (در ابعاد 512 در 512) هست ، بخاطر اینکه رنگ های زیادی نداره و تفکیک رنگش زیاد نیست (که اغلب تصاویر وکتور این طورن) ، خیلی جالب به نظر نمیرسه (هر چند خیلی هم بد نیست) اما زمانی که کوچیکتر میشه ، خیلی شبیه به آیکون اولش (تصویر png) میشه و این مشکل تا حد بسیار زیادی رفع میشه .
من هم که تصویر با ابعاد کوچیکش مد نظرمه (نهایتا 64 در 64) .


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

بله درست گفتید .
اگه همون بصورت png (یا rasterize) ، فقط رنگش را عوض میکردم ، خیلی زمان کمتری میبرد (سر و ته کار شاید 20 دقیقه هم طول نمیکشید برای ساخت 3 تصویر با 3 رنگ متفاوت) .

اما خوبیِ این وکتور اینه که بعدا ، هر رنگی میتونم بدم و برای تغییر مقدار رنگ هم دستم خیلی بازتر هست . علاوه بر اینکه در scale ئه تصویر هم دستم خیلی بازتر هست .
هر چند در عوض ، تبدیلش برای من که فتوشاپ تقریبا بلد نیستم ، خیلی زمان بیشتری برد (تقریبا نصف روز ، فقط کار اصلیِ تبدیل و با کارهای جانبی ، یک روز یا بیشتر) .


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


در ادامه ، چون فتوشاپم خیلی ضعیفه ، نکاتی برای تبدیل تصویر به وکتور برای آینده میگم :

1) اول اینکه در تکمیل پست 9 (که اطلاعات SVG ئه لایه ی مورد نظرمون را میگرفتیم) ، حالا اگه بخوایم اطلاعات مختصات (X و Y) ای که اون لایه ، در اون باند قرار داره را دریافت کنیم ، میتونیم روی این لایه (ای که نحوه ی ایجادش در پست 9 توضیح داده شد) ، کلیک راست و گزینه ی Copy CSS را انتخاب کنیم (طبق عکس زیر) :


2.JPG


که اطلاعاتی با فرمت زیر میده :

CSS:
.Vector1_Button_Black_SVG {
  background-color: rgb(65, 65, 65);
  position: absolute;
  left: 27px;
  top: 98px;
  width: 459px;
  height: 379px;
  z-index: 3;
}

که در کد بالا ، مقدار left ، همون مختصات X ، و مقدار top ، مختصات Y ئه مربوط به باندِ اون لایه ی مورد نظرمون هست .

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

2) برای تبدیل تصویر به وکتور که از راهنمای لینک قبلی (لینک زیر) استفاده کردم :


چند تا ویرایش انجام دادم که برای دفعات بعدی ، مرورش مفیده برام :

اول کار اینکه چون 6 قسمت از این شکل را با رنگ های متفاوت ، رنگ آمیزی کردم ، پس هر بار ، یک قسمت از این 6 قسمت را باید انتخاب کنم و همه ی مراحلی که در لینک بالا توضیح داده شده (با در نظر گرفتن استثناعات و توضیحاتی که در زیر میدم) را برای هر کدوم از این 6 قسمت ، انجام بدم :

1) تنظیمات مربوط به تار شدن (مثل اِعمال فیلترهای Diffuse و Gaussian Blur) را انجام ندادم و روی تصویرم اِعمال نکردم .
شاید بخاطر این باشه که تصویرم مثل تصویر اون سایت ، خیلی پیچیده نیست . به هر حال ، بدون اِعمالِ فیلتر تار شدن ، خروجی تصویرم بهتر بود .
- یعنی مراحل 2 و 3 و 11 را انجام ندادم و پریدم .

2) در مرحله ی 5 ، فیلتر High Pass ، مقدار Redius را روی 20 گذاشتم (انگار هر چی بیشتر بشه ، روی کیفیت خروجی ، بهتر تاثیر میذاره و آخر کار ، کیفیت بهتری درمیاد) .

3) در مرحله ی 6 ، مقدار "Blending Mode" ئه لایه را روی مقدار "Hard Light" گذاشتم .

4) در مرحله ی 8 ، مقدار Threshold Level را فکر کنم روی 97 گذاشتم (دقیق یادم نمیاد) .

5) در مرحله ی 12 ، تنظیمات Color Range ام بصورت زیر بود :


3.JPG

در این قسمت ، بخش Select ، روی مقدار Sampled Color بود (برخلاف اون سایت که روی مقدار Shdow گذاشت) .
این پنل خیلی به تنظیماتش (همین عکس بالا) و همچنین به تنظیمات مراحل قبل وابسته هست .
بعد از این مرحله ، خیلی از قسمت های انتخاب شده ممکنه همونی نباشه که ما میخوایم (حتی یک قسمت خیلی کوچیکی که مورد انتظار ما نیست ممکنه انتخاب بشه) که در این صورت با ابزارهای انتخابی دیگه باید اون قسمت ها را حذف شون کنیم و مهم هست .

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

فایل مربوط به اطلاعات هر یک از این 6 بخش از فتوشاپ و همچنین کدهای مربوط به WPF برای ساخت این آیکون را در فایل هایی در این پست پیوست میکنم .
تشکر استاد :rose:
 

پیوست ها

  • Drive Icon Vector Information.txt
    19.8 کیلوبایت · بازدیدها: 0
  • Drive Icon For WPF.txt
    18.7 کیلوبایت · بازدیدها: 1

جدیدترین ارسال ها

بالا