Adobe XD で作成したカンプデータをPSDにする方法

この記事では、少し前に登場したUXデザイン用アプリケーションAdobe User Experience (XD)で作成したデータを
PSDに変換する方法をお伝えします。

簡単な方法ではありますが、ポイントを押さえていないと、
色が変になったり、データサイズがデカすぎたりと
せっかく作ったデザインデータがWT◯な状況になり兼ねないので、
備忘録も兼ねて解説します。

前回の記事と同じく、時間ができた時にSSなどを付けて詳しく解説します。

必要なもの
・Adobe XD
・Adobe Illustrator

Adobe XD単体で契約しているケースは少ないと思いますので、
フル契約ならAIもお持ちでしょう。

オンライン上のコンバートなども有るが、思いしおかしい PSD が出来るケースも多かったので、
この方法をおすすめしたい。

1, AdobeXDでデザインデータを作成する
2, AdobeXDでデータを PDF に書き出す
ショートカットキー

Cmd / Ctrl + E

3, 書き出した PDF を AI で開く
4, ファイル > 書き出し > 書き出し形式… で、PSDに書き出す。※ここに注意点有り
– カラーモードをRGBにする
– 解像度をスクリーン (72ppi)にする
– デフォでは 150ppi になっているので大きすぎる
– レイヤーを保持
– テキストの編集機能を保持 と 編集機能を最大限に保持 にチェック
– アンチエイリアスはお好みで
– WEBデザインなどであれば、おそらく文字が多いだろうから 文字に最適 の方が良いでしょう
– IICプロファイルを埋め込む にチェックを付ける
– これをしないと色がおかしくなる可能性あり

XDを持っている先に、デザインを提出するときは XD で共有すればよいが、
まだ若いソフトなので、導入していないところも多いであろうし、
実際、PSDで要求されることも多い。
いつかXDがデファクトスタンダードとなる日が来ればありがたい。

P.S.
略称が XD なのだが、完全に顔文字でしかないので気に入ってます。

Amazon犬 – Amazon Dogs

こんにちは!
たくさんの大きなプロジェクトが進行しており、
なかなか投稿ができませんでした。

さーて、久しぶりの投稿ですが、開発関係のことではありません!

たまたま見つけた
Amazon Dogsについてご紹介します。
といってもWebサービスでもなんでもないのですが^^;

米国Amazon.comの既に存在しない商品ページ、404ページに行くと
かわいいワンちゃんたちが出迎えてくれます。

Screen Shot 2016-08-29 at 17.56.04

アクセスするたびに、違うワンちゃんが出てきます。

Screen Shot 2016-08-29 at 17.56.09

Screen Shot 2016-08-29 at 17.56.13

Screen Shot 2016-08-29 at 17.56.16

Screen Shot 2016-08-29 at 17.56.21

ワンちゃんをクリックすると、ワンちゃんの紹介ページが出てきます。

Screen Shot 2016-08-29 at 19.17.32

ワンちゃん紹介ページはこちら
かなりたくさんいますね^^

オフィスにペットが居るっていうのはホント素敵ですね。
今弊社でのオフィスで猫を飼おうと検討中です^^

ワンちゃんたちのカレンダーまで販売されているようです

以上、ちょっと気になったのでご紹介でした。

Google Drive の画像の直リンクURLを取得する – ありふぁぼ

概要

KENGOです。
今回は、タイトルの「Google Drive の画像直リンクを取得する方法」をご紹介したいと思います。

個人的にパソコン内がすぐごちゃごちゃになるタイプなので、
その時しか使わないような、WEBスクリーンショットなどは、一時的にでもローカルに落としたくない。

よく使うスクショ拡張機能などは、直接Google Driveにデータを渡せるものも多い。
なので、直接呼び出せると個人的には非常に便利だ。

GitHub や Qiita に手軽に画像を載せたい時にも Google Drive を利用できる。

活用シーンはいろいろあると思いますので、覚えておいて損はない。

方法

ドライブ上で画像を表示したURLや共有リンクはこのようになっている。

https://drive.google.com/drive/folders/{ID}
# {ID} 部分にはファイル個別の文字列が入る

これでは、imgタグなどで表示されません。
しかし、以下のように書き換えると表示されます。


http://drive.google.com/uc?export=view&id={ID}

このアドレスで、imgタグでも呼び出せますし、
MarkDownでも呼び出すことができます。

ぜひ、ご活用ください! それでは、今回はここまで。

WordPress で絵文字が使えるとたまたま知った – ありふぁぼ

HEY!GUYS! アレックスです

ぜひ紹介したいものや、気になるもの。
でもがっちりと書く内容ではないことをさくっとライトに紹介していく
そんな投稿を「ありふぁぼ」としてシンプルに投稿していきます。

第一回目の今回はWordPressの絵文字です。

まったく、ぜんぜん使うつもりがなかったのですがー
GitHub用のMarkdownをWordpressにコピペで投稿しましたら、
たまたま、一個だけ顔文字が表示されました。

これね!
Emoji

ちょこっと調べてみたら、素敵な記事がありました。
🔗 LINK : WordPress 4.2 絵文字が使えるようになりました 💕
丁寧に使い方が乗っているので、ぜひご参照ください。

でもこちらの方がGitHubと同じ記法で使えるので私にはいいですね。
🔗 LINK : 大量の絵文字を使えるようになるWordPressのプラグイン・Emoji Emoticons
今度入れてみたいと思います。

上の方は、Unicodeなので、そのままコピペで簡単に使えますが、
ユニコードを覚えることは、ナカナカ難しいと思います。
いつもコピペ必要になりそうです。

下の方は、プラグインが必要ですが、GitHubと同じ記法で絵文字をかけますし、
よく使うのは覚えれそうです。

あなたにあった方法を選んでくださいね。

Google Code Prettify を Monokai スタイルにしてみました。

こんばんは。
前回に続きましてKENGOです。

昨日、1記事目を作成している時に、
いろいろとコード記述などの装飾が不足しているなと思い、
作成いいたしました。

まずは、コード記述エリアの表示。

Google Code Prettifyが良いなと思い、
使えるようにしてみましたが、いまいち既存のカラーリングでは
満足できなかったので、大好きな Monokai をベースに
カラーリングを設定し、さらにWhitespaceの・表示や
インデントラインを表示させるように調整しました。

cssの編集だけでは、できなかったので、
一部JqueryでDOMを編集もしています。

そして、できたのが以下です。

< ?prettify?>

var Account;

Account = function(customer, cart) {
  var _this = this;
  this.customer = customer;
  this.cart = cart;
  return $('.shopping_cart').bind('click', function(event) {
    return _this.customer.purchase(_this.cart);
  });
};

続きを読む Google Code Prettify を Monokai スタイルにしてみました。