Font Awesome als Photoshop Custom Shape Set

8

Jedes Mal, wenn ich in Photoshop eine fantastische Schriftart verwenden muss , kopiere ich ein Symbol von der Website und füge es in Photoshop ein. Ich kann es als PDF drucken und als Vektor in den Illustrator kopieren, aber ich möchte sie als benutzerdefiniertes Photoshop-Formset. Ich habe den gesamten Text in Photoshop kopiert, aber dann muss ich die Ebenen auf jedes Symbol in jeder Ebene aufteilen. Dies wird lange dauern. Wie kann ich sie alle in eine .csh-Datei konvertieren?

Ferdi Çıldız
quelle

Antworten:

9

Dies könnte ein guter Zeitpunkt sein, um Skripte und den Skript-Listener in Ihr Tool-Set einzuführen. Während ein Plugin in Ordnung ist, könnten Sie später einige andere Ideen haben, wo dies helfen könnte. Also hier ist mein schnell zusammengepferchtes Skript. Um dies zu verwenden, ändern Sie den Setup-Teil und fügen Sie ihn in eine jsx-Datei ein (und ziehen Sie dann beispielsweise einen Tropfen auf Photoshop):

// setup preferences
SIZE = UnitValue(24, "pt");
FONT = "Cambria";
CHARS_TO_CONVERT = "ABCDEFGHIJ"

doc = app.activeDocument;
for ( var i = 0; i < CHARS_TO_CONVERT.length; i++ ){
    var ch = CHARS_TO_CONVERT.charAt(i)
    var layer = doc.artLayers.add();
    layer.kind = LayerKind.TEXT;
    layer.textItem.contents = ch;
    layer.textItem.font = FONT;
    layer.textItem.size = SIZE;
    layer.textItem.convertToShape();
    makeCustomShape(ch);
    layer.clear();
}

function makeCustomShape(name){
// recorded with script listener will make currently active path a custiom shape 
// with a specified name
    var idMk = charIDToTypeID( "Mk  " );
        var desc29 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref13 = new ActionReference();
            var idcustomShape = stringIDToTypeID( "customShape" );
            ref13.putClass( idcustomShape );
        desc29.putReference( idnull, ref13 );
        var idUsng = charIDToTypeID( "Usng" );
            var ref14 = new ActionReference();
            var idPrpr = charIDToTypeID( "Prpr" );
            var idfsel = charIDToTypeID( "fsel" );
            ref14.putProperty( idPrpr, idfsel );
            var idDcmn = charIDToTypeID( "Dcmn" );
            var idOrdn = charIDToTypeID( "Ordn" );
            var idTrgt = charIDToTypeID( "Trgt" );
            ref14.putEnumerated( idDcmn, idOrdn, idTrgt );
        desc29.putReference( idUsng, ref14 );
        var idNm = charIDToTypeID( "Nm  " );
        desc29.putString( idNm, name );
    executeAction( idMk, desc29, DialogModes.NO );
}

Es ist schneller als manuell zu erledigen.

Und hier ist eine für den speziellen Anwendungsfall:

// setup preferences
SIZE = UnitValue(24, "pt");
FONT = "FontAwesome";
arr = [
"glass \uf000",
"music \uf001",
"search \uf002",
"envelope-o \uf003",
"heart \uf004",
"star \uf005",
"star-o \uf006",
"user \uf007",
"film \uf008",
"th-large \uf009",
"th \uf00a",
"th-list \uf00b",
"check \uf00c",
"times \uf00d",
"search-plus \uf00e",
"search-minus \uf010",
"power-off \uf011",
"signal \uf012",
"cog \uf013",
"trash-o \uf014",
"home \uf015",
"file-o \uf016",
"clock-o \uf017",
"road \uf018",
"download \uf019",
"arrow-circle-o-down \uf01a",
"arrow-circle-o-up \uf01b",
"inbox \uf01c",
"play-circle-o \uf01d",
"repeat \uf01e",
"refresh \uf021",
"list-alt \uf022",
"lock \uf023",
"flag \uf024",
"headphones \uf025",
"volume-off \uf026",
"volume-down \uf027",
"volume-up \uf028",
"qrcode \uf029",
"barcode \uf02a",
"tag \uf02b",
"tags \uf02c",
"book \uf02d",
"bookmark \uf02e",
"print \uf02f",
"camera \uf030",
"font \uf031",
"bold \uf032",
"italic \uf033",
"text-height \uf034",
"text-width \uf035",
"align-left \uf036",
"align-center \uf037",
"align-right \uf038",
"align-justify \uf039",
"list \uf03a",
"outdent \uf03b",
"indent \uf03c",
"video-camera \uf03d",
"picture-o \uf03e",
"pencil \uf040",
"map-marker \uf041",
"adjust \uf042",
"tint \uf043",
"pencil-square-o \uf044",
"share-square-o \uf045",
"check-square-o \uf046",
"arrows \uf047",
"step-backward \uf048",
"fast-backward \uf049",
"backward \uf04a",
"play \uf04b",
"pause \uf04c",
"stop \uf04d",
"forward \uf04e",
"fast-forward \uf050",
"step-forward \uf051",
"eject \uf052",
"chevron-left \uf053",
"chevron-right \uf054",
"plus-circle \uf055",
"minus-circle \uf056",
"times-circle \uf057",
"check-circle \uf058",
"question-circle \uf059",
"info-circle \uf05a",
"crosshairs \uf05b",
"times-circle-o \uf05c",
"check-circle-o \uf05d",
"ban \uf05e",
"arrow-left \uf060",
"arrow-right \uf061",
"arrow-up \uf062",
"arrow-down \uf063",
"share \uf064",
"expand \uf065",
"compress \uf066",
"plus \uf067",
"minus \uf068",
"asterisk \uf069",
"exclamation-circle \uf06a",
"gift \uf06b",
"leaf \uf06c",
"fire \uf06d",
"eye \uf06e",
"eye-slash \uf070",
"exclamation-triangle \uf071",
"plane \uf072",
"calendar \uf073",
"random \uf074",
"comment \uf075",
"magnet \uf076",
"chevron-up \uf077",
"chevron-down \uf078",
"retweet \uf079",
"shopping-cart \uf07a",
"folder \uf07b",
"folder-open \uf07c",
"arrows-v \uf07d",
"arrows-h \uf07e",
"bar-chart-o \uf080",
"twitter-square \uf081",
"facebook-square \uf082",
"camera-retro \uf083",
"key \uf084",
"cogs \uf085",
"comments \uf086",
"thumbs-o-up \uf087",
"thumbs-o-down \uf088",
"star-half \uf089",
"heart-o \uf08a",
"sign-out \uf08b",
"linkedin-square \uf08c",
"thumb-tack \uf08d",
"external-link \uf08e",
"sign-in \uf090",
"trophy \uf091",
"github-square \uf092",
"upload \uf093",
"lemon-o \uf094",
"phone \uf095",
"square-o \uf096",
"bookmark-o \uf097",
"phone-square \uf098",
"twitter \uf099",
"facebook \uf09a",
"github \uf09b",
"unlock \uf09c",
"credit-card \uf09d",
"rss \uf09e",
"hdd-o \uf0a0",
"bullhorn \uf0a1",
"bell \uf0f3",
"certificate \uf0a3",
"hand-o-right \uf0a4",
"hand-o-left \uf0a5",
"hand-o-up \uf0a6",
"hand-o-down \uf0a7",
"arrow-circle-left \uf0a8",
"arrow-circle-right \uf0a9",
"arrow-circle-up \uf0aa",
"arrow-circle-down \uf0ab",
"globe \uf0ac",
"wrench \uf0ad",
"tasks \uf0ae",
"filter \uf0b0",
"briefcase \uf0b1",
"arrows-alt \uf0b2",
"users \uf0c0",
"link \uf0c1",
"cloud \uf0c2",
"flask \uf0c3",
"scissors \uf0c4",
"files-o \uf0c5",
"paperclip \uf0c6",
"floppy-o \uf0c7",
"square \uf0c8",
"bars \uf0c9",
"list-ul \uf0ca",
"list-ol \uf0cb",
"strikethrough \uf0cc",
"underline \uf0cd",
"table \uf0ce",
"magic \uf0d0",
"truck \uf0d1",
"pinterest \uf0d2",
"pinterest-square \uf0d3",
"google-plus-square \uf0d4",
"google-plus \uf0d5",
"money \uf0d6",
"caret-down \uf0d7",
"caret-up \uf0d8",
"caret-left \uf0d9",
"caret-right \uf0da",
"columns \uf0db",
"sort \uf0dc",
"sort-asc \uf0dd",
"sort-desc \uf0de",
"envelope \uf0e0",
"linkedin \uf0e1",
"undo \uf0e2",
"gavel \uf0e3",
"tachometer \uf0e4",
"comment-o \uf0e5",
"comments-o \uf0e6",
"bolt \uf0e7",
"sitemap \uf0e8",
"umbrella \uf0e9",
"clipboard \uf0ea",
"lightbulb-o \uf0eb",
"exchange \uf0ec",
"cloud-download \uf0ed",
"cloud-upload \uf0ee",
"user-md \uf0f0",
"stethoscope \uf0f1",
"suitcase \uf0f2",
"bell-o \uf0a2",
"coffee \uf0f4",
"cutlery \uf0f5",
"file-text-o \uf0f6",
"building-o \uf0f7",
"hospital-o \uf0f8",
"ambulance \uf0f9",
"medkit \uf0fa",
"fighter-jet \uf0fb",
"beer \uf0fc",
"h-square \uf0fd",
"plus-square \uf0fe",
"angle-double-left \uf100",
"angle-double-right \uf101",
"angle-double-up \uf102",
"angle-double-down \uf103",
"angle-left \uf104",
"angle-right \uf105",
"angle-up \uf106",
"angle-down \uf107",
"desktop \uf108",
"laptop \uf109",
"tablet \uf10a",
"mobile \uf10b",
"circle-o \uf10c",
"quote-left \uf10d",
"quote-right \uf10e",
"spinner \uf110",
"circle \uf111",
"reply \uf112",
"github-alt \uf113",
"folder-o \uf114",
"folder-open-o \uf115",
"smile-o \uf118",
"frown-o \uf119",
"meh-o \uf11a",
"gamepad \uf11b",
"keyboard-o \uf11c",
"flag-o \uf11d",
"flag-checkered \uf11e",
"terminal \uf120",
"code \uf121",
"reply-all \uf122",
"mail-reply-all \uf122",
"star-half-o \uf123",
"location-arrow \uf124",
"crop \uf125",
"code-fork \uf126",
"chain-broken \uf127",
"question \uf128",
"info \uf129",
"exclamation \uf12a",
"superscript \uf12b",
"subscript \uf12c",
"eraser \uf12d",
"puzzle-piece \uf12e",
"microphone \uf130",
"microphone-slash \uf131",
"shield \uf132",
"calendar-o \uf133",
"fire-extinguisher \uf134",
"rocket \uf135",
"maxcdn \uf136",
"chevron-circle-left \uf137",
"chevron-circle-right \uf138",
"chevron-circle-up \uf139",
"chevron-circle-down \uf13a",
"html5 \uf13b",
"css3 \uf13c",
"anchor \uf13d",
"unlock-alt \uf13e",
"bullseye \uf140",
"ellipsis-h \uf141",
"ellipsis-v \uf142",
"rss-square \uf143",
"play-circle \uf144",
"ticket \uf145",
"minus-square \uf146",
"minus-square-o \uf147",
"level-up \uf148",
"level-down \uf149",
"check-square \uf14a",
"pencil-square \uf14b",
"external-link-square \uf14c",
"share-square \uf14d",
"compass \uf14e",
"caret-square-o-down \uf150",
"caret-square-o-up \uf151",
"caret-square-o-right \uf152",
"eur \uf153",
"gbp \uf154",
"usd \uf155",
"inr \uf156",
"jpy \uf157",
"rub \uf158",
"krw \uf159",
"btc \uf15a",
"file \uf15b",
"file-text \uf15c",
"sort-alpha-asc \uf15d",
"sort-alpha-desc \uf15e",
"sort-amount-asc \uf160",
"sort-amount-desc \uf161",
"sort-numeric-asc \uf162",
"sort-numeric-desc \uf163",
"thumbs-up \uf164",
"thumbs-down \uf165",
"youtube-square \uf166",
"youtube \uf167",
"xing \uf168",
"xing-square \uf169",
"youtube-play \uf16a",
"dropbox \uf16b",
"stack-overflow \uf16c",
"instagram \uf16d",
"flickr \uf16e",
"adn \uf170",
"bitbucket \uf171",
"bitbucket-square \uf172",
"tumblr \uf173",
"tumblr-square \uf174",
"long-arrow-down \uf175",
"long-arrow-up \uf176",
"long-arrow-left \uf177",
"long-arrow-right \uf178",
"apple \uf179",
"windows \uf17a",
"android \uf17b",
"linux \uf17c",
"dribbble \uf17d",
"skype \uf17e",
"foursquare \uf180",
"trello \uf181",
"female \uf182",
"male \uf183",
"gittip \uf184",
"sun-o \uf185",
"moon-o \uf186",
"archive \uf187",
"bug \uf188",
"vk \uf189",
"weibo \uf18a",
"renren \uf18b",
"pagelines \uf18c",
"stack-exchange \uf18d",
"arrow-circle-o-right \uf18e",
"arrow-circle-o-left \uf190",
"caret-square-o-left \uf191",
"dot-circle-o \uf192",
"wheelchair \uf193",
"vimeo-square \uf194",
"try \uf195",
"plus-square-o \uf196"
]

doc = app.activeDocument;
for ( var i = 0; i < arr.length; i++ ){
    var data = arr[i].split(" ")
    var layer = doc.artLayers.add();
    layer.kind = LayerKind.TEXT;
    layer.textItem.contents = data[1];
    layer.textItem.font = FONT;
    layer.textItem.size = SIZE;
    layer.textItem.convertToShape();
    makeCustomShape(data[0]);
    layer.clear();
}

function makeCustomShape(name){
// recorded with script listener will make currently active path a custiom shape 
// with a specified name
    var idMk = charIDToTypeID( "Mk  " );
        var desc29 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref13 = new ActionReference();
            var idcustomShape = stringIDToTypeID( "customShape" );
            ref13.putClass( idcustomShape );
        desc29.putReference( idnull, ref13 );
        var idUsng = charIDToTypeID( "Usng" );
            var ref14 = new ActionReference();
            var idPrpr = charIDToTypeID( "Prpr" );
            var idfsel = charIDToTypeID( "fsel" );
            ref14.putProperty( idPrpr, idfsel );
            var idDcmn = charIDToTypeID( "Dcmn" );
            var idOrdn = charIDToTypeID( "Ordn" );
            var idTrgt = charIDToTypeID( "Trgt" );
            ref14.putEnumerated( idDcmn, idOrdn, idTrgt );
        desc29.putReference( idUsng, ref14 );
        var idNm = charIDToTypeID( "Nm  " );
        desc29.putString( idNm, name );
    executeAction( idMk, desc29, DialogModes.NO );
}
joojaa
quelle
Das ist fast das, wonach ich gesucht habe! Aber FontAwesome verwendet eindeutige Zeichen für jedes Symbol, keine Buchstaben wie "A, B ...". Wie kann ich es in dieses Skript schreiben?
Ferdi Çıldız
1
@ FerdiÇıldız Ich habe ein modifiziertes Skript hinzugefügt, das die ganze Drecksarbeit erledigt (weil es einfach war, können Unicode-Zeichen mit \ uCODE erstellt werden). Scalped die Namen und Codes bilden den Spickzettel (so ist die Bibliothek schön und ordentlich). Die Bearbeitung dauert eine Weile. Machen Sie also eine Pause. Denken Sie daran, zu speichern, sobald Sie fertig sind. Kaufen Sie jemandem ein Freibier, ja.
Joojaa
Genial! Das ist Arbeit perfekt! Danke joojaa!
Ferdi Çıldız
Ich habe dies in eine .csh-Datei konvertiert. Wenn Sie möchten, können Sie sie hier herunterladen: dl.dropboxusercontent.com/u/8060862/fontawesome.csh
Ferdi Çıldız
4

Sie können das Flaticon Photoshop Plugin verwenden. Damit haben Sie Zugriff auf die Formen aller Symbolschriftarten im Web.

http://www.flaticon.com/download-plugin

Hoffe das hilft....

winnyboy5
quelle
2

Hier ist eine Photoshop-Erweiterung für die Verwendung von Font-Awesome als Formen in Ihren Designs

http://creativedo.co/FontAwesomePS

Muhammad Ahsan
quelle
Seite wird nicht funktionieren (oder nur für jetzt)
Ferdi Çıldız
Site arbeitet auf meiner Seite
Muhammad Ahsan
1

Abgesehen von der Installation der Font Awesome-Desktop-Schriftart und der Verwendung des Font Awesome-Cheatsheets ( http://fortawesome.github.io/Font-Awesome/cheatsheet/ ) gibt es keine herkömmliche Arbeitsmethode zum direkten Konvertieren in eine .csh-Datei.

Sie können die Symbole höchstens manuell mit der Methode Ebene -> Typ -> In Form konvertieren konvertieren.

Peter Noble
quelle
Ich kenne diese Methode, aber es gibt viele Symbole, es wird sehr lange dauern.
Ferdi Çıldız